Use React root

apps/meteor/client/components/UserStatusMenu.tsx

@@ -75,7 +75,9 @@ const UserStatusMenu = ({
 		[hide, reset],
 	);
 
-	useEffect(() => onChange(status), [status, onChange]);
+	useEffect(() => {
+		onChange(status);
+	}, [status, onChange]);
 
 	return (
 		<>

apps/meteor/client/lib/createReactiveSubscriptionFactory.ts

@@ -24,14 +24,16 @@ export const createReactiveSubscriptionFactory =
 
 		let computation: Tracker.Computation | undefined;
 
-		queueMicrotask(() => {
-			computation = Tracker.autorun(reactiveFn);
-		});
-
 		return [
 			(callback): (() => void) => {
 				callbacks.add(callback);
 
+				queueMicrotask(() => {
+					if (!computation || computation.stopped) {
+						computation = Tracker.autorun(reactiveFn);
+					}
+				});
+
 				return (): void => {
 					callbacks.delete(callback);
 

apps/meteor/client/startup/appRoot.tsx

@@ -1,5 +1,5 @@
 import { StrictMode } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import AppRoot from '../views/root/AppRoot';
 
@@ -17,9 +17,10 @@ const createContainer = (): Element => {
 
 const container = createContainer();
 
-render(
+const root = createRoot(container);
+
+root.render(
 	<StrictMode>
 		<AppRoot />
 	</StrictMode>,
-	container,
 );

packages/ui-client/src/helpers/anchors.ts

@@ -20,6 +20,10 @@ const setAnchorRefCount = (anchorElement: HTMLElement, refCount: number): void =
 
 export const refAnchorElement = (anchorElement: HTMLElement): void => {
 	setAnchorRefCount(anchorElement, getAnchorRefCount(anchorElement) + 1);
+
+	if (anchorElement.parentElement !== document.body) {
+		document.body.appendChild(anchorElement);
+	}
 };
 
 export const unrefAnchorElement = (anchorElement: HTMLElement): void => {