diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx index 9030465b32..46191d3fee 100644 --- a/src/apps/dashboard/AppLayout.tsx +++ b/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,39 +49,41 @@ export const Component: FC = () => { return ( - - - + + - - - - + + + + + - { - isDrawerAvailable && ( - - ) - } + { + isDrawerAvailable && ( + + ) + } + { return ( - - - - - + + + + + + - { - isDrawerAvailable && ( - - ) - } + { + isDrawerAvailable && ( + + ) + } + { const { default: Page } = await importPage(page ?? path, type); return { - Component: Page + element: ( + + + + ) }; } }; diff --git a/src/components/viewManager/ViewManagerPage.tsx b/src/components/viewManager/ViewManagerPage.tsx index ada011a365..efba34f2d6 100644 --- a/src/components/viewManager/ViewManagerPage.tsx +++ b/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 = ({ 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 = ({ }); }; - 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 diff --git a/src/index.jsx b/src/index.jsx index cbbc633ce6..1db2bcebef 100644 --- a/src/index.jsx +++ b/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( - - - + ); }