From 893a780846ccb5d2ec87f83f2871c34874b6f94e Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@anthropic.com>
Date: Tue, 5 May 2026 09:47:40 -0700
Subject: [PATCH] feat(frontend): enable React StrictMode at root
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the three React 18 root mounts (views/index, views/menu, embedded)
in <StrictMode>. Refs #39890.

StrictMode is dev-only — production builds are unchanged. The RTL test
wrapper does not enable StrictMode, so the existing test suite is
unaffected. Any double-invocation/cleanup issues that surface during
local dev work should be tracked as follow-up items.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 superset-frontend/src/embedded/index.tsx |  8 +++--
 superset-frontend/src/views/index.tsx    |  7 ++++-
 superset-frontend/src/views/menu.tsx     | 39 +++++++++++++-----------
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/embedded/index.tsx b/superset-frontend/src/embedded/index.tsx
index a7437968678..15b674cb0b8 100644
--- a/superset-frontend/src/embedded/index.tsx
+++ b/superset-frontend/src/embedded/index.tsx
@@ -18,7 +18,7 @@
  */
 import 'src/public-path';
 
-import { lazy, Suspense } from 'react';
+import { lazy, StrictMode, Suspense } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { Global } from '@emotion/react';
@@ -196,7 +196,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
diff --git a/superset-frontend/src/views/index.tsx b/superset-frontend/src/views/index.tsx
index e583f2bad86..456c1f09e92 100644
--- a/superset-frontend/src/views/index.tsx
+++ b/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);
diff --git a/superset-frontend/src/views/menu.tsx b/superset-frontend/src/views/menu.tsx
index dda01a8e27e..5ba511c7032 100644
--- a/superset-frontend/src/views/menu.tsx
+++ b/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');