From 05bd8a244036ba830d980624c26df9e50057f5d9 Mon Sep 17 00:00:00 2001
From: taffyko <taffyko@protonmail.com>
Date: Wed, 23 Oct 2024 10:11:27 -0700
Subject: [PATCH] Clean up react root on unmount

---
 src/components/views/messages/TextualBody.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index a5d52abde1..79f5a50615 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 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 { TooltipProvider } from "@vector-im/compound-web";
 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 tooltips: Element[] = [];
-    private reactRoots: Element[] = [];
+    private reactRoots: Array<Element | Root> = [];
 
     private ref = createRef<HTMLDivElement>();
 
@@ -149,7 +149,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         unmountTooltips(this.tooltips);
 
         for (const root of this.reactRoots) {
-            ReactDOM.unmountComponentAtNode(root);
+            if (root instanceof Element) {
+                ReactDOM.unmountComponentAtNode(root);
+            } else {
+                setTimeout(() => root.unmount());
+            }
         }
 
         this.pills = [];
@@ -256,7 +260,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                         {after}
                     </>
                 );
-                createRoot(container).render(newContent);
+                const containerRoot = createRoot(container);
+                containerRoot.render(newContent);
+                this.reactRoots.push(containerRoot);
 
                 node.parentNode?.replaceChild(container, node);
             } else if (node.childNodes && node.childNodes.length) {