Merge pull request #6223 from thornbill/strict-mode-strikes-again

src/apps/dashboard/AppLayout.tsx

@@ -4,7 +4,7 @@ import { type Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, StrictMode, useCallback, useEffect, useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
@@ -49,6 +49,7 @@ export const Component: FC = () => {
     return (
         <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={dateFnsLocale}>
             <Box sx={{ display: 'flex' }}>
+                <StrictMode>
                     <ElevationScroll elevate={false}>
                         <AppBar
                             position='fixed'
@@ -82,6 +83,7 @@ export const Component: FC = () => {
                             />
                         )
                     }
+                </StrictMode>
 
                 <Box
                     component='main'

src/apps/experimental/AppLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { StrictMode, useCallback, useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import { type Theme } from '@mui/material/styles';
@@ -30,6 +30,7 @@ export const Component = () => {
 
     return (
         <Box sx={{ position: 'relative', display: 'flex', height: '100%' }}>
+            <StrictMode>
                 <ElevationScroll elevate={false}>
                     <AppBar
                         position='fixed'
@@ -61,6 +62,7 @@ export const Component = () => {
                         />
                     )
                 }
+            </StrictMode>
 
             <Box
                 component='main'

src/components/router/AsyncRoute.tsx

@@ -1,3 +1,4 @@
+import React, { StrictMode } from 'react';
 import type { RouteObject } from 'react-router-dom';
 
 export enum AsyncRouteType {
@@ -39,7 +40,11 @@ export const toAsyncPageRoute = ({
         lazy: async () => {
             const { default: Page } = await importPage(page ?? path, type);
             return {
-                Component: Page
+                element: (
+                    <StrictMode>
+                        <Page />
+                    </StrictMode>
+                )
             };
         }
     };

src/components/viewManager/ViewManagerPage.tsx

@@ -1,5 +1,5 @@
 import { Action } from 'history';
-import { FunctionComponent, useEffect, useRef } from 'react';
+import { FunctionComponent, useEffect } from 'react';
 import { useLocation, useNavigationType } from 'react-router-dom';
 
 import globalize from 'lib/globalize';
@@ -58,13 +58,6 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
     isThemeMediaSupported = false,
     transition
 }) => {
-    /**
-     * HACK: This is a hack to workaround intentional behavior in React strict mode when running in development.
-     * Legacy views will break if loaded twice so we need to avoid that. This will likely stop working in React 19.
-     * refs: https://stackoverflow.com/a/72238236
-     */
-    const isLoaded = useRef(false);
-
     const location = useLocation();
     const navigationType = useNavigationType();
 
@@ -98,11 +91,7 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
                 });
         };
 
-        if (!isLoaded.current) loadPage();
-
-        return () => {
-            isLoaded.current = true;
-        };
+        loadPage();
     },
     // location.state and navigationType are NOT included as dependencies here since dialogs will update state while the current view stays the same
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/index.jsx

@@ -1,7 +1,7 @@
 // Import legacy browser polyfills
 import 'lib/legacy';
 
-import React, { StrictMode } from 'react';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 // NOTE: We need to import this first to initialize the connection
@@ -268,9 +268,7 @@ async function renderApp() {
 
     const root = createRoot(container);
     root.render(
-        <StrictMode>
         <RootApp history={history} />
-        </StrictMode>
     );
 }