Extract setLayoutParameters

Set layout for general pages
Avoid re-setting data to equal value

src/app/components/shell/router-helpers/fallback-to.js

@@ -29,5 +29,6 @@ export default function FallbackTo({name, setLayoutParameters}) {
         return <FlexPage data={data} />;
     }
 
+    setLayoutParameters({data: undefined, name: 'default'});
     return <FallbackToGeneralPage name={name} />;
 }

src/app/components/shell/router-helpers/use-layout-parameters.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function useLayoutParameters() {
+    const [layoutName, setLayoutName] = React.useState('default');
+    const [layoutData, setLayoutData] = React.useState<unknown>(undefined);
+    const setLayoutParameters = React.useCallback(
+        // eslint-disable-next-line no-shadow
+        ({name, data}: { name: string; data: unknown;}) => {
+            setLayoutName(name);
+            if (JSON.stringify(data) !== JSON.stringify(layoutData)) {
+                setLayoutData(data);
+            }
+        },
+        [layoutData]
+    );
+
+    return {layoutName, layoutData, setLayoutParameters};
+}

src/app/components/shell/router.js

@@ -12,6 +12,7 @@ import useLinkHandler from './router-helpers/use-link-handler';
 import useRouterContext, {RouterContextProvider} from './router-context';
 import loadable from 'react-loadable';
 import LoadingPlaceholder from '~/components/loading-placeholder/loading-placeholder';
+import useLayoutParameters from './router-helpers/use-layout-parameters';
 import './skip-to-content.scss';
 
 function useAnalyticsPageView() {
@@ -73,23 +74,14 @@ function usePage(name, setLayoutParameters) {
 
 function ImportedPage({name}) {
     const {pathname} = useLocation();
-    const [layoutName, setLayoutName] = React.useState('default');
-    const [layoutData, setLayoutData] = React.useState(undefined);
+    const {layoutName, layoutData, setLayoutParameters} = useLayoutParameters();
     const LoadableLayout = React.useMemo(
         () => loadable({
             loader: () => import(`~/layouts/${layoutName}/${layoutName}`),
             loading: LoadingPlaceholder
         }),
         [layoutName]
     );
-    const setLayoutParameters = React.useCallback(
-        // eslint-disable-next-line no-shadow
-        ({name, data}) => {
-            setLayoutName(name);
-            setLayoutData(data);
-        },
-        []
-    );
     const Page = usePage(name, setLayoutParameters);
 
     useAnalyticsPageView();