mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-18 21:31:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

Clean up react root on unmount

Browse source
This commit is contained in:
taffyko 2024-10-23 10:11:27 -07:00
parent 16ad8146c5
commit 05bd8a2440
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/messages/TextualBody.tsx
View file

@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { createRef, SyntheticEvent, MouseEvent } from "react"; import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client"; import { createRoot, Root } from "react-dom/client";
import { MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix"; import { MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
import { globToRegexp } from "matrix-js-sdk/src/utils"; import { globToRegexp } from "matrix-js-sdk/src/utils";
@ -53,7 +53,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
private pills: Element[] = []; private pills: Element[] = [];
private tooltips: Element[] = []; private tooltips: Element[] = [];
private reactRoots: Element[] = []; private reactRoots: Array<Element | Root> = [];
private ref = createRef<HTMLDivElement>(); private ref = createRef<HTMLDivElement>();
@ -149,7 +149,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
unmountTooltips(this.tooltips); unmountTooltips(this.tooltips);
for (const root of this.reactRoots) { for (const root of this.reactRoots) {
if (root instanceof Element) {
ReactDOM.unmountComponentAtNode(root); ReactDOM.unmountComponentAtNode(root);
} else {
setTimeout(() => root.unmount());
}
} }
this.pills = []; this.pills = [];
@ -256,7 +260,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
{after} {after}
</> </>
); );
createRoot(container).render(newContent); const containerRoot = createRoot(container);
containerRoot.render(newContent);
this.reactRoots.push(containerRoot);
node.parentNode?.replaceChild(container, node); node.parentNode?.replaceChild(container, node);
} else if (node.childNodes && node.childNodes.length) { } else if (node.childNodes && node.childNodes.length) {