chore: memoized indexes in formfield to prevent unneccessary updates

Related to #1102
bpmn-io · Apr 8, 2024 · f809482 · f809482
1 parent 2f9cae0
commit f809482
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/packages/form-js-viewer/src/render/components/FormField.js b/packages/form-js-viewer/src/render/components/FormField.js
@@ -7,6 +7,7 @@ import { FormContext, FormRenderContext } from '../context';
 
 import {
   useCondition,
+  useDeepCompareMemoize,
   useReadonly,
   useService
 } from '../hooks';
@@ -19,7 +20,7 @@ const noop = () => false;
 export function FormField(props) {
   const {
     field,
-    indexes,
+    indexes: _indexes,
     onChange
   } = props;
 
@@ -44,6 +45,8 @@ export function FormField(props) {
 
   const { formId } = useContext(FormContext);
 
+  const indexes = useDeepCompareMemoize(_indexes || {});
+
   // track whether we should trigger initial validation on certain actions, e.g. field blur
   // disabled straight away, if viewerCommands are not available
   const [ initialValidationTrigger, setInitialValidationTrigger ] = useState(!!viewerCommands);
@@ -134,7 +137,7 @@ export function FormField(props) {
   }
 
   const domId = `${prefixId(field.id, formId, indexes)}`;
-  const fieldErrors = get(errors, [ field.id, ...Object.values(indexes || {}) ]) || [];
+  const fieldErrors = get(errors, [ field.id, ...Object.values(indexes) ]) || [];
 
   const formFieldElement = (
     <FormFieldComponent