[FIX] Replace React.DOM render with createRoot

benchmark/src/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import Logger from "@lichtblick/log";
 import { initI18n } from "@lichtblick/suite-base";
@@ -17,11 +17,6 @@ window.onerror = (...args) => {
   console.error(...args);
 };
 
-const rootEl = document.getElementById("root");
-if (!rootEl) {
-  throw new Error("missing #root element");
-}
-
 async function main() {
   const { overwriteFetch, waitForFonts } = await import("@lichtblick/suite-base");
   overwriteFetch();
@@ -32,8 +27,13 @@ async function main() {
 
   const { Root } = await import("./Root");
 
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(<Root />, rootEl);
+  const rootEl = document.getElementById("root");
+  if (!rootEl) {
+    throw new Error("missing #root element");
+  }
+
+  const root = createRoot(rootEl);
+  root.render(<Root />);
 }
 
 void main();

packages/suite-base/src/components/Chart/index.tsx

@@ -304,39 +304,47 @@ function Chart(props: Props): JSX.Element {
         typeof canvas.transferControlToOffscreen === "function"
           ? canvas.transferControlToOffscreen()
           : canvas;
-      const scales = await sendWrapperRef.current<RpcScales>(
-        "initialize",
-        {
-          node: offscreenCanvas,
-          type,
-          data: update.data,
-          typedData: update.typedData,
-          options: update.options,
-          devicePixelRatio,
-          width: update.width,
-          height: update.height,
-        },
-        [
-          // If this is actually a HTMLCanvasElement then it will not be transferred because we
-          // don't use a worker
-          offscreenCanvas as OffscreenCanvas,
-        ],
-      );
-      maybeUpdateScales(scales);
-      onFinishRender?.();
-
-      // We cannot rely solely on the call to `initialize`, since it doesn't
-      // actually produce the first frame. However, if we append this update to
-      // the end, it will overwrite updates that have been queued _since we
-      // started initializing_. This is incorrect behavior and can set the
-      // scales incorrectly on weak devices.
-      //
-      // To prevent this from happening, we put this update at the beginning of
-      // the queue so that it gets coalesced properly.
-      queuedUpdates.current = [update, ...queuedUpdates.current];
-      await flushUpdates(sendWrapperRef.current);
-      // once we are initialized, we can allow other handlers to send to the rpc endpoint
-      rpcSendRef.current = sendWrapperRef.current;
+
+      // Using queueMicrotask to ensure the canvas is completely inserted into the DOM
+      // before sending the initialization request to the worker.
+      queueMicrotask(async () => {
+        if (!sendWrapperRef.current) {
+          return;
+        }
+        const scales = await sendWrapperRef.current<RpcScales>(
+          "initialize",
+          {
+            node: offscreenCanvas,
+            type,
+            data: update.data,
+            typedData: update.typedData,
+            options: update.options,
+            devicePixelRatio,
+            width: update.width,
+            height: update.height,
+          },
+          [
+            // If this is actually a HTMLCanvasElement then it will not be transferred because we
+            // don't use a worker
+            offscreenCanvas as OffscreenCanvas,
+          ],
+        );
+        maybeUpdateScales(scales);
+        onFinishRender?.();
+
+        // We cannot rely solely on the call to `initialize`, since it doesn't
+        // actually produce the first frame. However, if we append this update to
+        // the end, it will overwrite updates that have been queued _since we
+        // started initializing_. This is incorrect behavior and can set the
+        // scales incorrectly on weak devices.
+        //
+        // To prevent this from happening, we put this update at the beginning of
+        // the queue so that it gets coalesced properly.
+        queuedUpdates.current = [update, ...queuedUpdates.current];
+        await flushUpdates(sendWrapperRef.current);
+        // once we are initialized, we can allow other handlers to send to the rpc endpoint
+        rpcSendRef.current = sendWrapperRef.current;
+      });
     },
     [maybeUpdateScales, onFinishRender, onStartRender, type, flushUpdates],
   );

packages/suite-base/src/components/DocumentDropListener.test.tsx

@@ -16,7 +16,7 @@
 //   You may not use this file except in compliance with the License.
 
 import { SnackbarProvider } from "notistack";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 
 import DocumentDropListener from "@lichtblick/suite-base/components/DocumentDropListener";
@@ -33,16 +33,15 @@ describe("<DocumentDropListener>", () => {
     wrapper = document.createElement("div");
     document.body.appendChild(wrapper);
 
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.render(
+    const root = createRoot(wrapper);
+    root.render(
       <div>
         <SnackbarProvider>
           <ThemeProvider isDark={false}>
             <DocumentDropListener allowedExtensions={[]} />
           </ThemeProvider>
         </SnackbarProvider>
       </div>,
-      wrapper,
     );
 
     (console.error as jest.Mock).mockClear();
@@ -65,9 +64,7 @@ describe("<DocumentDropListener>", () => {
     (event as any).dataTransfer = {
       types: ["Files"],
     };
-    act(() => {
-      document.dispatchEvent(event); // The event should NOT bubble up from the document to the window
-    });
+    document.dispatchEvent(event); // The event should NOT bubble up from the document to the window
 
     expect(windowDragoverHandler).not.toHaveBeenCalled();
   });

packages/suite-base/src/panels/CallService/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { StrictMode, useMemo } from "react";
+import { useMemo } from "react";
 
 import { useCrash } from "@lichtblick/hooks";
 import { PanelExtensionContext } from "@lichtblick/suite";
@@ -20,11 +20,9 @@ import { Config } from "./types";
 
 function initPanel(crash: ReturnType<typeof useCrash>, context: PanelExtensionContext) {
   return createSyncRoot(
-    <StrictMode>
-      <CaptureErrorBoundary onError={crash}>
-        <CallService context={context} />
-      </CaptureErrorBoundary>
-    </StrictMode>,
+    <CaptureErrorBoundary onError={crash}>
+      <CallService context={context} />
+    </CaptureErrorBoundary>,
     context.panelElement,
   );
 }

packages/suite-base/src/panels/Gauge/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { StrictMode, useMemo } from "react";
+import { useMemo } from "react";
 
 import { useCrash } from "@lichtblick/hooks";
 import { PanelExtensionContext } from "@lichtblick/suite";
@@ -21,13 +21,11 @@ import { Config } from "./types";
 
 function initPanel(crash: ReturnType<typeof useCrash>, context: PanelExtensionContext) {
   return createSyncRoot(
-    <StrictMode>
-      <CaptureErrorBoundary onError={crash}>
-        <ThemeProvider isDark>
-          <Gauge context={context} />
-        </ThemeProvider>
-      </CaptureErrorBoundary>
-    </StrictMode>,
+    <CaptureErrorBoundary onError={crash}>
+      <ThemeProvider isDark>
+        <Gauge context={context} />
+      </ThemeProvider>
+    </CaptureErrorBoundary>,
     context.panelElement,
   );
 }

packages/suite-base/src/panels/Indicator/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { StrictMode, useMemo } from "react";
+import { useMemo } from "react";
 
 import { useCrash } from "@lichtblick/hooks";
 import { PanelExtensionContext } from "@lichtblick/suite";
@@ -21,13 +21,11 @@ import { Config } from "./types";
 
 function initPanel(crash: ReturnType<typeof useCrash>, context: PanelExtensionContext) {
   return createSyncRoot(
-    <StrictMode>
-      <CaptureErrorBoundary onError={crash}>
-        <ThemeProvider isDark>
-          <Indicator context={context} />
-        </ThemeProvider>
-      </CaptureErrorBoundary>
-    </StrictMode>,
+    <CaptureErrorBoundary onError={crash}>
+      <ThemeProvider isDark>
+        <Indicator context={context} />
+      </ThemeProvider>
+    </CaptureErrorBoundary>,
     context.panelElement,
   );
 }

packages/suite-base/src/panels/StateTransitions/index.tsx

@@ -200,7 +200,7 @@ function StateTransitions(props: Props) {
     const xAxisHeight = 30;
     return {
       height: Math.max(80, onlyTopicsHeight + xAxisHeight),
-      heightPerTopic: onlyTopicsHeight / paths.length,
+      heightPerTopic: paths.length === 0 ? 0 : onlyTopicsHeight / paths.length,
     };
   }, [paths.length]);
 

packages/suite-base/src/panels/Teleop/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { StrictMode, useMemo } from "react";
+import { useMemo } from "react";
 
 import { useCrash } from "@lichtblick/hooks";
 import { PanelExtensionContext } from "@lichtblick/suite";
@@ -19,11 +19,9 @@ import TeleopPanel from "./TeleopPanel";
 
 function initPanel(crash: ReturnType<typeof useCrash>, context: PanelExtensionContext) {
   return createSyncRoot(
-    <StrictMode>
-      <CaptureErrorBoundary onError={crash}>
-        <TeleopPanel context={context} />
-      </CaptureErrorBoundary>
-    </StrictMode>,
+    <CaptureErrorBoundary onError={crash}>
+      <TeleopPanel context={context} />
+    </CaptureErrorBoundary>,
     context.panelElement,
   );
 }

packages/suite-base/src/panels/ThreeDeeRender/index.tsx

@@ -5,7 +5,7 @@
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-import { StrictMode, useMemo } from "react";
+import { useMemo } from "react";
 import { DeepPartial } from "ts-essentials";
 
 import { useCrash } from "@lichtblick/hooks";
@@ -40,18 +40,16 @@ type InitPanelArgs = {
 function initPanel(args: InitPanelArgs, context: BuiltinPanelExtensionContext) {
   const { crash, forwardedAnalytics, interfaceMode, testOptions, customSceneExtensions } = args;
   return createSyncRoot(
-    <StrictMode>
-      <CaptureErrorBoundary onError={crash}>
-        <ForwardAnalyticsContextProvider forwardedAnalytics={forwardedAnalytics}>
-          <ThreeDeeRender
-            context={context}
-            interfaceMode={interfaceMode}
-            testOptions={testOptions}
-            customSceneExtensions={customSceneExtensions}
-          />
-        </ForwardAnalyticsContextProvider>
-      </CaptureErrorBoundary>
-    </StrictMode>,
+    <CaptureErrorBoundary onError={crash}>
+      <ForwardAnalyticsContextProvider forwardedAnalytics={forwardedAnalytics}>
+        <ThreeDeeRender
+          context={context}
+          interfaceMode={interfaceMode}
+          testOptions={testOptions}
+          customSceneExtensions={customSceneExtensions}
+        />
+      </ForwardAnalyticsContextProvider>
+    </CaptureErrorBoundary>,
     context.panelElement,
   );
 }

packages/suite-base/src/panels/createSyncRoot.test.tsx

@@ -5,51 +5,45 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
-import { screen } from "@testing-library/react";
+import { act, screen, waitFor } from "@testing-library/react";
 
 import { createSyncRoot } from "@lichtblick/suite-base/panels/createSyncRoot";
 
 describe("createSyncRoot", () => {
-  const originalError = console.error;
-
-  beforeAll(() => {
-    // Supress specific warning about ReactDOM.render
-    console.error = (...args) => {
-      if (args[0]?.includes("Warning: ReactDOM.render is no longer supported") === true) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  afterAll(() => {
-    // Restore original console.error after tests
-    console.error = originalError;
+  afterEach(() => {
+    document.body.innerHTML = "";
   });
 
   it("should mount the component", async () => {
-    const textTest = "Mount Component Test";
-    const TestComponent = () => <div>{textTest}</div>;
-
     const container = document.createElement("div");
     document.body.appendChild(container);
 
-    createSyncRoot(<TestComponent />, container);
+    const text = "Mount Component Test";
+    const TestComponent = () => <div>{text}</div>;
+    act(() => {
+      createSyncRoot(<TestComponent />, container);
+    });
 
-    expect(await screen.findByText(textTest)).toBeDefined();
+    expect(container.innerHTML).toContain(text);
+    await expect(screen.findByText(text)).resolves.not.toBeUndefined();
   });
 
-  it("should unmount the component", () => {
-    const textTest = "Unmount Component Test";
-    const TestComponent = () => <div>{textTest}</div>;
-
+  it("should unmount the component", async () => {
     const container = document.createElement("div");
     document.body.appendChild(container);
 
-    const unmountCb = createSyncRoot(<TestComponent />, container);
-    expect(screen.queryAllByText(textTest)).toHaveLength(1);
-
-    unmountCb();
-    expect(screen.queryAllByText(textTest)).toHaveLength(0);
+    const text = "Unmount Component Test";
+    const TestComponent = () => <div>{text}</div>;
+    act(() => {
+      const unmount = createSyncRoot(<TestComponent />, container);
+      queueMicrotask(() => {
+        unmount();
+      });
+    });
+
+    await waitFor(() => {
+      expect(container.innerHTML).not.toContain(text);
+      expect(screen.queryByText(text)).toBeNull();
+    });
   });
 });