feat(frontend): enable React StrictMode at root

superset-frontend/src/embedded/index.tsx

@@ -18,7 +18,7 @@
  */
 import 'src/public-path';
 
-import { lazy, Suspense } from 'react';
+import { lazy, StrictMode, Suspense, useEffect } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { Global } from '@emotion/react';
@@ -66,20 +66,21 @@ const LazyDashboardPage = lazy(
     ),
 );
 
-const EmbededLazyDashboardPage = () => {
+const EmbeddedLazyDashboardPage = () => {
   const uiConfig = useUiConfig();
+  const emitDataMasks = uiConfig?.emitDataMasks;
 
-  // Emit data mask changes to the parent window
-  if (uiConfig?.emitDataMasks) {
+  // Emit data mask changes to the parent window. Subscribing inside an effect
+  // (rather than during render) ensures the unsubscribe runs on unmount,
+  // including StrictMode's dev-mode double-mount cycle.
+  useEffect(() => {
+    if (!emitDataMasks) return undefined;
     log('setting up Switchboard event emitter');
 
     let previousDataMask = store.getState().dataMask;
 
-    store.subscribe(() => {
-      const currentState = store.getState();
-      const currentDataMask = currentState.dataMask;
-
-      // Only emit if the dataMask has changed
+    return store.subscribe(() => {
+      const currentDataMask = store.getState().dataMask;
       if (previousDataMask !== currentDataMask) {
         Switchboard.emit('observeDataMask', {
           ...currentDataMask,
@@ -88,7 +89,7 @@ const EmbededLazyDashboardPage = () => {
         previousDataMask = currentDataMask;
       }
     });
-  }
+  }, [emitDataMasks]);
 
   return <LazyDashboardPage idOrSlug={bootstrapData.embedded!.dashboard_id} />;
 };
@@ -107,7 +108,7 @@ const EmbeddedRoute = () => (
     />
     <Suspense fallback={<Loading />}>
       <ErrorBoundary>
-        <EmbededLazyDashboardPage />
+        <EmbeddedLazyDashboardPage />
       </ErrorBoundary>
       <ToastContainer position="top" />
     </Suspense>
@@ -196,7 +197,11 @@ function start() {
       if (!root) {
         root = createRoot(appMountPoint);
       }
-      root.render(<EmbeddedApp />);
+      root.render(
+        <StrictMode>
+          <EmbeddedApp />
+        </StrictMode>,
+      );
     },
     err => {
       // something is most likely wrong with the guest token; reset the guard

superset-frontend/src/views/index.tsx

@@ -18,6 +18,7 @@
  */
 import 'src/public-path';
 
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { logging } from '@apache-superset/core/utils';
 import initPreamble from 'src/preamble';
@@ -31,7 +32,11 @@ if (appMountPoint) {
       await initPreamble();
     } finally {
       const { default: App } = await import(/* webpackMode: "eager" */ './App');
-      root.render(<App />);
+      root.render(
+        <StrictMode>
+          <App />
+        </StrictMode>,
+      );
     }
   })().catch(err => {
     logging.error('Unhandled error during app initialization', err);

superset-frontend/src/views/menu.tsx

@@ -20,6 +20,7 @@ import 'src/public-path';
 
 // Menu App. Used in views that do not already include the Menu component in the layout.
 // eg, backend rendered views
+import { StrictMode } from 'react';
 import { Provider } from 'react-redux';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
@@ -45,24 +46,26 @@ const emotionCache = createCache({
 });
 
 const app = (
-  <CacheProvider value={emotionCache}>
-    <ThemeProvider theme={theme}>
-      <Provider store={store}>
-        <BrowserRouter>
-          <QueryParamProvider
-            adapter={ReactRouter5Adapter}
-            options={{
-              searchStringToObject: querystring.parse,
-              objectToSearchString: (object: Record<string, any>) =>
-                querystring.stringify(object, { encode: false }),
-            }}
-          >
-            <Menu data={menu} />
-          </QueryParamProvider>
-        </BrowserRouter>
-      </Provider>
-    </ThemeProvider>
-  </CacheProvider>
+  <StrictMode>
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <QueryParamProvider
+              adapter={ReactRouter5Adapter}
+              options={{
+                searchStringToObject: querystring.parse,
+                objectToSearchString: (object: Record<string, any>) =>
+                  querystring.stringify(object, { encode: false }),
+              }}
+            >
+              <Menu data={menu} />
+            </QueryParamProvider>
+          </BrowserRouter>
+        </Provider>
+      </ThemeProvider>
+    </CacheProvider>
+  </StrictMode>
 );
 
 const menuMountPoint = document.getElementById('app-menu');