fix: Download worker and monaco initializing multiple times in dev (#2452)

Author: mattrunyon

packages/code-studio/src/AppRoot.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MonacoUtils } from '@deephaven/console';
 import { DownloadServiceWorkerUtils } from '@deephaven/iris-grid';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
@@ -11,25 +11,28 @@ if (import.meta.env.VITE_PLAYWRIGHT_CSS === '1') {
 }
 
 export function AppRoot(): JSX.Element {
-  DownloadServiceWorkerUtils.register(
-    new URL(
-      `${import.meta.env.BASE_URL ?? ''}download/serviceWorker.js`,
-      window.location.href
-    )
-  );
-  MonacoUtils.init({
-    getWorker: (id: string, label: string) => {
-      if (label === 'json') {
-        return new MonacoJsonWorker();
-      }
-      return new MonacoWorker();
-    },
-  });
+  useEffect(function init() {
+    DownloadServiceWorkerUtils.register(
+      new URL(
+        `${import.meta.env.BASE_URL ?? ''}download/serviceWorker.js`,
+        window.location.href
+      )
+    );
 
-  // disable annoying dnd-react warnings
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    MonacoUtils.init({
+      getWorker: (id: string, label: string) => {
+        if (label === 'json') {
+          return new MonacoJsonWorker();
+        }
+        return new MonacoWorker();
+      },
+    });
+
+    // disable annoying dnd-react warnings
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+  }, []);
 
   return <AppRouter />;
 }

packages/code-studio/src/styleguide/StyleGuideRoot.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { FontBootstrap } from '@deephaven/app-utils';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
@@ -9,18 +9,20 @@ import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import StyleGuideInit from './StyleGuideInit';
 
 export function StyleGuideRoot(): JSX.Element {
-  DownloadServiceWorkerUtils.register(
-    new URL(
-      `${import.meta.env.BASE_URL ?? ''}download/serviceWorker.js`,
-      window.location.href
-    )
-  );
-  MonacoUtils.init({ getWorker: () => new MonacoWorker() });
+  useEffect(function init() {
+    DownloadServiceWorkerUtils.register(
+      new URL(
+        `${import.meta.env.BASE_URL ?? ''}download/serviceWorker.js`,
+        window.location.href
+      )
+    );
+    MonacoUtils.init({ getWorker: () => new MonacoWorker() });
 
-  // disable annoying dnd-react warnings
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    // disable annoying dnd-react warnings
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+  }, []);
 
   return (
     <FontBootstrap>