Fix components not being unmounted on page hide

2025-06-03 17:31:46 -04:00
parent afb1f9570d
commit b705cfc4c3
3 changed files with 19 additions and 11 deletions
@@ -14,12 +14,16 @@ export const renderComponent = <P extends object> (
    props: P,
    element: HTMLElement
 ) => {
-    createRoot(element)
-        .render(
-            <RootContext>
-                <Component {...props} />
-            </RootContext>
-        );
+    const root = createRoot(element);
+    root.render(
+        <RootContext>
+            <Component {...props} />
+        </RootContext>
+    );
+
+    // NOTE: We need to wrap the unmount in a setTimeout to workaround this issue with nested roots:
+    // https://github.com/facebook/react/issues/25675
+    return () => setTimeout(() => root.unmount());
 };

 const RootContext: React.FC<React.PropsWithChildren> = ({ children }) => {