Avoid re-rendering of Dashboards when settings haven't changed

The list pages were re-rendering the dashboards over and over again
because the identity of the dashboard settings changes with every render
and therefore caused a re-render loop.

Author: bjoernricks

src/web/components/dashboard/Dashboard.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {useCallback, useEffect, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
 import {type ThunkDispatch} from '@reduxjs/toolkit';
 import memoize from 'memoize-one';
 import {connect} from 'react-redux';
@@ -129,11 +129,51 @@ export const Dashboard = ({
   const [_] = useTranslation();
   const callLoadSettings = useLatestCallback(loadSettings);
   const callSetDefaultSettings = useLatestCallback(setDefaultSettings);
+  const permittedDisplaysSignature = JSON.stringify(permittedDisplays ?? []);
+  const defaultDisplaysSignature = JSON.stringify(defaultDisplays ?? []);
+
+  const stablePermittedDisplaysRef = useRef(permittedDisplays ?? []);
+  const permittedDisplaysSignatureRef = useRef(permittedDisplaysSignature);
+  const defaultDashboardSettingsRef = useRef(
+    convertDefaultDisplays(defaultDisplays),
+  );
+  const defaultDisplaysSignatureRef = useRef(defaultDisplaysSignature);
+
+  // Update the stable permitted displays if the signature has changed
+  if (permittedDisplaysSignatureRef.current !== permittedDisplaysSignature) {
+    stablePermittedDisplaysRef.current = permittedDisplays ?? [];
+    permittedDisplaysSignatureRef.current = permittedDisplaysSignature;
+  }
+
+  // Update the default dashboard settings if the signature has changed
+  if (defaultDisplaysSignatureRef.current !== defaultDisplaysSignature) {
+    defaultDashboardSettingsRef.current =
+      convertDefaultDisplays(defaultDisplays);
+    defaultDisplaysSignatureRef.current = defaultDisplaysSignature;
+  }
+
+  const defaultDashboardSettings = defaultDashboardSettingsRef.current;
+  const stablePermittedDisplays = stablePermittedDisplaysRef.current;
+
+  const defaults = useMemo(
+    () => ({
+      ...defaultDashboardSettings,
+      permittedDisplays: stablePermittedDisplays,
+      maxItemsPerRow,
+      maxRows,
+    }),
+    [
+      defaultDashboardSettings,
+      maxItemsPerRow,
+      maxRows,
+      stablePermittedDisplays,
+    ],
+  );
 
   const components = useMemo(() => {
     const mappedComponents: Record<string, DisplayComponent> = {};
 
-    (permittedDisplays ?? []).forEach((displayId: string) => {
+    stablePermittedDisplays.forEach((displayId: string) => {
       const display = getDisplay(displayId);
 
       if (isDefined(display)) {
@@ -144,7 +184,7 @@ export const Dashboard = ({
     });
 
     return mappedComponents;
-  }, [permittedDisplays]);
+  }, [stablePermittedDisplays]);
 
   const getDisplaysByIdMemoized = useMemo(
     () => memoize((rows: DashboardRow[] = []) => getDisplaysById(rows)),
@@ -158,24 +198,14 @@ export const Dashboard = ({
   );
 
   useEffect(() => {
-    const defaultDashboardSettings = convertDefaultDisplays(defaultDisplays);
-    const defaults: DashboardSettings = {
-      ...defaultDashboardSettings,
-      permittedDisplays,
-      maxItemsPerRow,
-      maxRows,
-    };
-
     callSetDefaultSettings(id, defaultDashboardSettings);
     callLoadSettings(id, defaults);
   }, [
     callLoadSettings,
     callSetDefaultSettings,
-    defaultDisplays,
+    defaultDashboardSettings,
+    defaults,
     id,
-    maxItemsPerRow,
-    maxRows,
-    permittedDisplays,
   ]);
 
   const rows = getRowsFromSettings();

src/web/components/dashboard/__tests__/Dashboard.test.tsx

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import {useState} from 'react';
 import {beforeEach, describe, expect, test, testing} from '@gsa/testing';
-import {rendererWith, screen, waitFor} from 'web/testing';
+import {rendererWith, screen, waitFor, fireEvent} from 'web/testing';
 import {vi} from 'vitest';
 import Dashboard, {
   DEFAULT_MAX_ITEMS_PER_ROW,
@@ -181,4 +182,104 @@ describe('Dashboard', () => {
 
     expect(globals.__dashboardSortableGridCalls).toEqual([]);
   });
+
+  test('should not reload settings when display props keep same content across rerenders', async () => {
+    const {dashboardId, defaultDisplays, gmp, permittedDisplays} =
+      createDashboardState();
+
+    const {render} = rendererWith({gmp, store: true});
+
+    const StablePropsTestComponent = () => {
+      // create new arrays on rerender to simulate prop changes,
+      // but keep the content the same
+      const [rerendered, setRerendered] = useState(false);
+      const currentDefaultDisplays = rerendered
+        ? [...defaultDisplays.map(row => [...row])]
+        : defaultDisplays;
+      const currentPermittedDisplays = rerendered
+        ? [...permittedDisplays]
+        : permittedDisplays;
+
+      return (
+        <>
+          <button
+            data-testid="rerender-dashboard"
+            type="button"
+            onClick={() => setRerendered(true)}
+          />
+          <Dashboard
+            defaultDisplays={currentDefaultDisplays}
+            id={dashboardId}
+            permittedDisplays={currentPermittedDisplays}
+          />
+        </>
+      );
+    };
+
+    render(<StablePropsTestComponent />);
+
+    await waitFor(() => {
+      expect(gmp.dashboard.getSetting).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(screen.getByTestId('rerender-dashboard'));
+
+    await waitFor(() => {
+      expect(gmp.dashboard.getSetting).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('should reload settings when display props content changes', async () => {
+    const {
+      dashboardId,
+      defaultDisplayId,
+      defaultDisplays,
+      gmp,
+      permittedDisplays,
+    } = createDashboardState();
+    const extraDisplayId = `extra-${testCounter}`;
+
+    registerDisplay(createDisplayComponent(extraDisplayId), 'Extra display');
+
+    const {render} = rendererWith({gmp, store: true});
+
+    const ChangedPropsTestComponent = () => {
+      // create new arrays on rerender to simulate prop changes,
+      // and change the content of the arrays on rerender
+      const [rerendered, setRerendered] = useState(false);
+      const currentDefaultDisplays = rerendered
+        ? [[defaultDisplayId, extraDisplayId]]
+        : defaultDisplays;
+      const currentPermittedDisplays = rerendered
+        ? [...permittedDisplays, extraDisplayId]
+        : permittedDisplays;
+
+      return (
+        <>
+          <button
+            data-testid="rerender-with-changes"
+            type="button"
+            onClick={() => setRerendered(true)}
+          />
+          <Dashboard
+            defaultDisplays={currentDefaultDisplays}
+            id={dashboardId}
+            permittedDisplays={currentPermittedDisplays}
+          />
+        </>
+      );
+    };
+
+    render(<ChangedPropsTestComponent />);
+
+    await waitFor(() => {
+      expect(gmp.dashboard.getSetting).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(screen.getByTestId('rerender-with-changes'));
+
+    await waitFor(() => {
+      expect(gmp.dashboard.getSetting).toHaveBeenCalledTimes(2);
+    });
+  });
 });