Improving performance when having lots of components (#3552)

* Adding a lightweight commit/queue system, as performance got significantly when having many components/rows

* Removing logging

* Fixing pagination bugs

* Refactoring to try to get RepeatingGroupTableRow to not do _everything_ and make it not re-render when any row changes

* Refactoring RepeatingGroupContext to get rid of the nested context. Claude did most of this. This seems to have a drastic effect on rendering RepeatingGroup, since the context will no longer update and cause ripples in the render tree.

* getRecursiveValidations() looped through every node, but that will just be slower the more nodes you get. Since this a very hot path, it's worth writing some more code and using layoutLookups to more efficiently find every child id without iteration.

* Unit tests don't have react-compiler to lean on, so auto-memoization doesn't work there. We still need to memoize some things the old way.

* Ugh, I had to bring back useWaitUntilReady() to make it wait for validation commits to be stored in nodeData again. This failed some tests, but luckily it can be kept a bit simpler than it used to be.

* Some shared expression tests seems to fail because of too many window.logError calls. I have no idea why, but memoizing a little helped.

* Cleaning up inconsistent aria labels in repeating groups

* Getting deep validations didn't work exactly as expected after the rewrite, as some nested components were left out (failing a test).

* It seems like the readyForPrint component isn't always rendered now, and it makes sense since the loader isn't visible after changing the layout any longer either.

* Waiting until 456 is saved before closing, as the validation might not be found until a little bit after that.

* Removing indexing bug workaround

* Preventing re-rendering of the entire ProvideGlobalContext component, which caused performance issues. Commits now only re-render a child component that commits during useLayoutEffect() as before.

* This was a sneaky one! When changing layouts, for example via cy.changeLayout(), the loader would render briefly, and umount <AutoCommit />. This would cause the triggerAutoCommit() function to no longer update the correct component from then on, ruining the auto-commit functionality and breaking stuff after it.

---------

Co-authored-by: Ole Martin Handeland <[email protected]>

Author: olemartinorg

src/features/attachments/StoreAttachmentsInNode.tsx

@@ -53,7 +53,7 @@ function StoreAttachmentsInNodeWorker() {
     deepEqual('attachments' in data ? data.attachments : undefined, attachments),
   );
 
-  const setNodeProp = NodesInternal.useSetNodeProp();
+  const setNodeProp = GeneratorInternal.useSetNodeProp();
   useEffect(() => {
     !hasBeenSet && setNodeProp({ nodeId: parent.indexedId!, prop: 'attachments', value: attachments });
   }, [attachments, hasBeenSet, parent.indexedId, setNodeProp]);

src/features/validation/StoreValidationsInNode.tsx

@@ -48,7 +48,7 @@ function useStoreValidations(baseComponentId: string) {
     (data) => !deepEqual('validations' in data ? data.validations : undefined, validations),
   );
 
-  const setNodeProp = NodesInternal.useSetNodeProp();
+  const setNodeProp = GeneratorInternal.useSetNodeProp();
   useEffect(() => {
     shouldSetValidations && setNodeProp({ nodeId: indexedId, prop: 'validations', value: validations });
   }, [indexedId, setNodeProp, shouldSetValidations, validations]);

src/features/validation/ValidationStorePlugin.tsx

@@ -154,7 +154,8 @@ export class ValidationStorePlugin extends NodeDataPlugin<ValidationStorePluginC
         const lookups = useLayoutLookups();
         return store.useMemoSelector((state) => {
           const { baseComponentId } = splitDashedKey(indexedId);
-          return getRecursiveValidations({
+          const output: NodeRefValidation[] = [];
+          getRecursiveValidations({
             state,
             id: indexedId,
             baseId: baseComponentId,
@@ -163,7 +164,10 @@ export class ValidationStorePlugin extends NodeDataPlugin<ValidationStorePluginC
             includeSelf,
             restriction,
             lookups,
+            baseToIndexedMap: makeComponentIdIndex(state),
+            output,
           });
+          return output;
         });
       },
       useValidationsSelector: () => {
@@ -340,38 +344,69 @@ function getValidations({
 }
 
 interface GetDeepValidationsProps extends GetValidationsProps {
+  output: NodeRefValidation[];
   includeSelf: boolean;
   restriction?: number | undefined;
+  baseToIndexedMap: Map<string, string[]>;
 }
 
-export function getRecursiveValidations(props: GetDeepValidationsProps): NodeRefValidation[] {
-  const out: NodeRefValidation[] = [];
-
+export function getRecursiveValidations(props: GetDeepValidationsProps) {
   if (props.includeSelf) {
     const nodeValidations = getValidations(props);
     for (const validation of nodeValidations) {
-      out.push({ ...validation, nodeId: props.id, baseComponentId: props.baseId });
+      props.output.push({ ...validation, nodeId: props.id, baseComponentId: props.baseId });
     }
   }
 
-  const children = Object.values(props.state.nodeData)
-    .filter(
-      (nodeData) =>
-        nodeData.parentId === props.id && (props.restriction === undefined || props.restriction === nodeData.rowIndex),
-    )
-    .map((nodeData) => nodeData.id);
+  for (const child of getChildren(props)) {
+    getRecursiveValidations({
+      ...props,
+      id: child.id,
+      baseId: child.baseId,
+
+      // Restriction and includeSelf should only be applied to the first level (not recursively)
+      restriction: undefined,
+      includeSelf: true,
+    });
+  }
+}
+
+function getChildren(props: GetDeepValidationsProps): { id: string; baseId: string }[] {
+  const children: { id: string; baseId: string }[] = [];
+  if (!props.lookups) {
+    return children;
+  }
+
+  const { depth } = splitDashedKey(props.id);
+  const parentSuffix = depth.length ? `-${depth.join('-')}` : '';
+  const childBaseIds = props.lookups.componentToChildren[props.baseId] ?? [];
+  for (const childBaseId of childBaseIds) {
+    const lookForSuffix = props.restriction === undefined ? parentSuffix : `${parentSuffix}-${props.restriction}`;
+    const childId = `${childBaseId}${lookForSuffix}`;
+
+    for (const idToCheck of props.baseToIndexedMap.get(childBaseId) ?? []) {
+      const childData = props.state.nodeData[idToCheck];
+      if (!childData || !idToCheck.startsWith(childId)) {
+        continue;
+      }
+      children.push({ id: childData.id, baseId: childData.baseId });
+    }
+  }
 
-  for (const id of children) {
-    out.push(
-      ...getRecursiveValidations({
-        ...props,
-        id,
+  return children;
+}
 
-        // Restriction and includeSelf should only be applied to the first level (not recursively)
-        restriction: undefined,
-        includeSelf: true,
-      }),
-    );
+export function makeComponentIdIndex(state: NodesContext) {
+  const out = new Map<string, string[]>();
+  for (const id of Object.keys(state.nodeData)) {
+    const data = state.nodeData[id];
+    if (!data) {
+      continue;
+    }
+    const baseId = data.baseId;
+    const children = out.get(baseId) ?? [];
+    children.push(id);
+    out.set(baseId, children);
   }
 
   return out;

src/features/validation/callbacks/onGroupCloseValidation.ts

@@ -1,12 +1,11 @@
-import { useCallback } from 'react';
-
 import { useLayoutLookups } from 'src/features/form/layout/LayoutsContext';
 import { getVisibilityMask } from 'src/features/validation/utils';
 import { Validation } from 'src/features/validation/validationContext';
-import { getRecursiveValidations } from 'src/features/validation/ValidationStorePlugin';
+import { getRecursiveValidations, makeComponentIdIndex } from 'src/features/validation/ValidationStorePlugin';
 import { useEffectEvent } from 'src/hooks/useEffectEvent';
 import { useComponentIdMutator } from 'src/utils/layout/DataModelLocation';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
+import type { NodeRefValidation } from 'src/features/validation';
 import type { AllowedValidationMasks } from 'src/layout/common.generated';
 
 /**
@@ -18,14 +17,15 @@ export function useOnGroupCloseValidation() {
   const validating = Validation.useValidating();
   const nodeStore = NodesInternal.useStore();
   const lookups = useLayoutLookups();
-  const idMutator = useComponentIdMutator();
+  const idMutator = useComponentIdMutator(true);
 
   /* Ensures the callback will have the latest state */
   const callback = useEffectEvent(
     (baseComponentId: string, restriction: number | undefined, masks: AllowedValidationMasks): boolean => {
       const mask = getVisibilityMask(masks);
       const state = nodeStore.getState();
-      const nodesWithErrors = getRecursiveValidations({
+      const errors: NodeRefValidation[] = [];
+      getRecursiveValidations({
         id: idMutator(baseComponentId),
         baseId: baseComponentId,
         includeHidden: false,
@@ -35,7 +35,11 @@ export function useOnGroupCloseValidation() {
         mask,
         state,
         lookups,
-      }).map((v) => v.nodeId);
+        baseToIndexedMap: makeComponentIdIndex(state),
+        output: errors,
+      });
+
+      const nodesWithErrors = errors.map((v) => v.nodeId);
 
       if (nodesWithErrors.length > 0) {
         setNodeVisibility(nodesWithErrors, mask);
@@ -46,11 +50,8 @@ export function useOnGroupCloseValidation() {
     },
   );
 
-  return useCallback(
-    async (baseComponentId: string, restriction: number | undefined, masks: AllowedValidationMasks) => {
-      await validating();
-      return callback(baseComponentId, restriction, masks);
-    },
-    [callback, validating],
-  );
+  return async (baseComponentId: string, restriction: number | undefined, masks: AllowedValidationMasks) => {
+    await validating();
+    return callback(baseComponentId, restriction, masks);
+  };
 }

src/features/validation/validationContext.tsx

@@ -33,6 +33,7 @@ import { SchemaValidation } from 'src/features/validation/schemaValidation/Schem
 import { hasValidationErrors, mergeFieldValidations, selectValidations } from 'src/features/validation/utils';
 import { useAsRef } from 'src/hooks/useAsRef';
 import { useWaitForState } from 'src/hooks/useWaitForState';
+import { NodesInternal } from 'src/utils/layout/NodesContext';
 
 interface Internals {
   individualValidations: {
@@ -173,6 +174,7 @@ export function ValidationProvider({ children }: PropsWithChildren) {
 }
 
 function useWaitForValidation(): WaitForValidation {
+  const waitForNodesReady = NodesInternal.useWaitUntilReady();
   const waitForSave = FD.useWaitForSave();
   const waitForState = useWaitForState<ValidationsProcessedLast['initial'], ValidationContext & Internals>(useStore());
   const hasPendingAttachments = useHasPendingAttachments();
@@ -195,6 +197,7 @@ function useWaitForValidation(): WaitForValidation {
       await waitForAttachments((state) => !state);
 
       // Wait until we've saved changed to backend, and we've processed the backend validations we got from that save
+      await waitForNodesReady();
       const validationsFromSave = await waitForSave(forceSave);
       // If validationsFromSave is not defined, we check if initial validations are done processing
       await waitForState(async (state) => {
@@ -211,12 +214,14 @@ function useWaitForValidation(): WaitForValidation {
 
         return false;
       });
+      await waitForNodesReady();
     },
     [
       enabled,
       getCachedInitialValidations,
       hasWritableDataTypes,
       waitForAttachments,
+      waitForNodesReady,
       waitForNodesToValidate,
       waitForSave,
       waitForState,

src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx

@@ -14,7 +14,7 @@ import { AllComponentValidations } from 'src/features/validation/ComponentValida
 import { RepeatingGroupsEditContainer } from 'src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer';
 import { RepeatingGroupPagination } from 'src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination';
 import {
-  useRepeatingGroup,
+  RepGroupContext,
   useRepeatingGroupComponentId,
   useRepeatingGroupPagination,
   useRepeatingGroupRowState,
@@ -181,7 +181,8 @@ export const alignStyle = (align: ButtonPosition): React.CSSProperties => {
 function AddButton() {
   const { lang, langAsString } = useLanguage();
   const { triggerFocus } = useRepeatingGroupsFocusContext();
-  const { addRow, baseComponentId } = useRepeatingGroup();
+  const baseComponentId = useRepeatingGroupComponentId();
+  const addRow = RepGroupContext.useAddRow();
   const { visibleRows } = useRepeatingGroupRowState();
   const { editingAll, editingNone, isEditingAnyRow, currentlyAddingRow } = useRepeatingGroupSelector((state) => ({
     editingAll: state.editingAll,

src/layout/RepeatingGroup/EditContainer/RepeatingGroupEditContainer.test.tsx

@@ -9,7 +9,7 @@ import { ALTINN_ROW_ID } from 'src/features/formData/types';
 import { RepeatingGroupsEditContainer } from 'src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer';
 import {
   RepeatingGroupProvider,
-  useRepeatingGroup,
+  RepGroupContext,
   useRepeatingGroupRowState,
   useRepeatingGroupSelector,
 } from 'src/layout/RepeatingGroup/Providers/RepeatingGroupContext';
@@ -134,7 +134,7 @@ function TestRenderer() {
   const editingId = useRepeatingGroupSelector((state) => state.editingId);
   const { visibleRows } = useRepeatingGroupRowState();
   const editingIndex = visibleRows.find((r) => r.uuid === editingId)?.index;
-  const { openForEditing } = useRepeatingGroup();
+  const openForEditing = RepGroupContext.useOpenForEditing();
 
   if (editingIndex === undefined || editingId === undefined) {
     return (

src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx

@@ -14,7 +14,7 @@ import {
   useRepeatingGroupEdit,
 } from 'src/layout/RepeatingGroup/EditContainer/RepeatingGroupEditContext';
 import {
-  useRepeatingGroup,
+  RepGroupContext,
   useRepeatingGroupComponentId,
   useRepeatingGroupRowState,
 } from 'src/layout/RepeatingGroup/Providers/RepeatingGroupContext';
@@ -58,7 +58,10 @@ function RepeatingGroupsEditContainerInternal({
 }: IRepeatingGroupsEditContainer & {
   row: RepGroupRow;
 }): JSX.Element | null {
-  const { baseComponentId, closeForEditing, deleteRow, openNextForEditing, isDeleting } = useRepeatingGroup();
+  const baseComponentId = useRepeatingGroupComponentId();
+  const closeForEditing = RepGroupContext.useCloseForEditing();
+  const deleteRow = RepGroupContext.useDeleteRow();
+  const openNextForEditing = RepGroupContext.useOpenNextForEditing();
   const { visibleRows } = useRepeatingGroupRowState();
   const childIds = RepGroupHooks.useChildIdsWithMultiPage(baseComponentId);
 
@@ -73,6 +76,7 @@ function RepeatingGroupsEditContainerInternal({
 
   const { multiPageEnabled, multiPageIndex, nextMultiPage, prevMultiPage, hasNextMultiPage, hasPrevMultiPage } =
     useRepeatingGroupEdit();
+  const isDeleting = RepGroupContext.useIsDeletingRow(editId);
   const id = useIndexedId(baseComponentId);
   const rowWithExpressions = RepGroupHooks.useRowWithExpressions(baseComponentId, { uuid: row.uuid });
   const textsForRow = rowWithExpressions?.textResourceBindings;
@@ -127,7 +131,7 @@ function RepeatingGroupsEditContainerInternal({
             <Button
               variant='tertiary'
               color='danger'
-              disabled={isDeleting(editId)}
+              disabled={isDeleting}
               onClick={() => deleteRow({ index: row.index, uuid: row.uuid })}
               data-testid='delete-button'
             >

src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx

@@ -8,7 +8,8 @@ import { useLanguage } from 'src/features/language/useLanguage';
 import { useIsMini, useIsMobile, useIsMobileOrTablet } from 'src/hooks/useDeviceWidths';
 import classes from 'src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css';
 import {
-  useRepeatingGroup,
+  RepGroupContext,
+  useRepeatingGroupComponentId,
   useRepeatingGroupPagination,
   useRepeatingGroupRowState,
 } from 'src/layout/RepeatingGroup/Providers/RepeatingGroupContext';
@@ -33,7 +34,8 @@ export function RepeatingGroupPagination(props: RepeatingGroupPaginationProps) {
   return <RGPagination {...props} />;
 }
 function RGPagination({ inTable = true }: RepeatingGroupPaginationProps) {
-  const { changePage, baseComponentId } = useRepeatingGroup();
+  const baseComponentId = useRepeatingGroupComponentId();
+  const changePage = RepGroupContext.useChangePage();
   const { hasPagination, rowsPerPage, currentPage, totalPages } = useRepeatingGroupPagination();
   const pagesWithErrors = usePagesWithErrors(rowsPerPage, baseComponentId);
   const isTablet = useIsMobileOrTablet();
@@ -149,6 +151,10 @@ function PaginationComponent({
             ? `${langAsString('general.edit_alt_error')}: ${langAsString('general.page_number', [page])}`
             : langAsString('general.page_number', [page]);
 
+          if (typeof page !== 'number') {
+            return <Pagination.Item key={itemKey} />;
+          }
+
           return (
             <Pagination.Item key={itemKey}>
               <Pagination.Button

src/layout/RepeatingGroup/Providers/OpenByDefaultProvider.test.tsx

@@ -9,7 +9,7 @@ import { FD } from 'src/features/formData/FormDataWrite';
 import { ALTINN_ROW_ID } from 'src/features/formData/types';
 import {
   RepeatingGroupProvider,
-  useRepeatingGroup,
+  RepGroupContext,
   useRepeatingGroupRowState,
   useRepeatingGroupSelector,
 } from 'src/layout/RepeatingGroup/Providers/RepeatingGroupContext';
@@ -35,7 +35,7 @@ describe('openByDefault', () => {
       editingId: state.editingId,
       addingIds: state.addingIds,
     }));
-    const { deleteRow } = useRepeatingGroup();
+    const deleteRow = RepGroupContext.useDeleteRow();
     const { visibleRows, hiddenRows } = useRepeatingGroupRowState();
 
     const data = FD.useDebouncedPick({ field: 'MyGroup', dataType: defaultDataTypeMock });