From 4d9ad8381fe8a11cdf3e9589228241c35366ff7f Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 15 Oct 2024 11:44:14 -0400 Subject: [PATCH] Add hack to prevent rerendering legacy views in development --- src/components/viewManager/ViewManagerPage.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/viewManager/ViewManagerPage.tsx b/src/components/viewManager/ViewManagerPage.tsx index 72c05511b7..ada011a365 100644 --- a/src/components/viewManager/ViewManagerPage.tsx +++ b/src/components/viewManager/ViewManagerPage.tsx @@ -1,5 +1,5 @@ import { Action } from 'history'; -import { FunctionComponent, useEffect } from 'react'; +import { FunctionComponent, useEffect, useRef } from 'react'; import { useLocation, useNavigationType } from 'react-router-dom'; import globalize from 'lib/globalize'; @@ -58,6 +58,13 @@ 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(); @@ -91,9 +98,13 @@ const ViewManagerPage: FunctionComponent = ({ }); }; - loadPage(); + if (!isLoaded.current) loadPage(); + + return () => { + isLoaded.current = true; + }; }, - // location.state and navigationType are NOT included as dependencies here since dialogs will update state while the current view stays the same + // 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 [ controller,