feat: optimizes blocks and arrays by removing some additional rerenders

src/admin/components/forms/Form/fieldReducer.ts

@@ -78,6 +78,10 @@ function fieldReducer(state: Fields, action: FieldAction): Fields {
 
       return {
         ...remainingFlattenedState,
+        [path]: {
+          ...(state[path] || {}),
+          disableFormData: unflattenedRows.length > 0,
+        },
         ...flattenedRowState,
       };
     }
@@ -104,6 +108,10 @@ function fieldReducer(state: Fields, action: FieldAction): Fields {
 
       const newState = {
         ...remainingFlattenedState,
+        [path]: {
+          ...(state[path] || {}),
+          disableFormData: true,
+        },
         ...(flatten({ [path]: unflattenedRows }, { filters: flattenFilters })),
       };
 
@@ -128,6 +136,10 @@ function fieldReducer(state: Fields, action: FieldAction): Fields {
 
       const newState = {
         ...remainingFlattenedState,
+        [path]: {
+          ...(state[path] || {}),
+          disableFormData: true,
+        },
         ...(flatten({ [path]: unflattenedRows }, { filters: flattenFilters })),
       };
 

src/admin/components/forms/field-types/Array/index.tsx

@@ -80,39 +80,39 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     showError,
     errorMessage,
     value,
-    setValue,
   } = useField({
     path,
     validate: memoizedValidate,
     condition,
+    disableFormData: rows?.length > 0,
   });
 
   const addRow = useCallback(async (rowIndex: number) => {
     const subFieldState = await buildStateFromSchema({ fieldSchema: fields, operation, id, user, locale });
     dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path });
     dispatchRows({ type: 'ADD', rowIndex });
-    setValue(value as number + 1);
+    setModified(true);
 
     setTimeout(() => {
       scrollToID(`${path}-row-${rowIndex + 1}`);
     }, 0);
-  }, [dispatchRows, dispatchFields, fields, path, setValue, value, operation, id, user, locale]);
+  }, [dispatchRows, dispatchFields, fields, path, operation, id, user, locale, setModified]);
 
   const duplicateRow = useCallback(async (rowIndex: number) => {
     dispatchFields({ type: 'DUPLICATE_ROW', rowIndex, path });
     dispatchRows({ type: 'ADD', rowIndex });
-    setValue(value as number + 1);
+    setModified(true);
 
     setTimeout(() => {
       scrollToID(`${path}-row-${rowIndex + 1}`);
     }, 0);
-  }, [dispatchRows, dispatchFields, path, setValue, value]);
+  }, [dispatchRows, dispatchFields, path, setModified]);
 
   const removeRow = useCallback((rowIndex: number) => {
     dispatchRows({ type: 'REMOVE', rowIndex });
     dispatchFields({ type: 'REMOVE_ROW', rowIndex, path });
-    setValue(value as number - 1);
-  }, [dispatchRows, dispatchFields, path, value, setValue]);
+    setModified(true);
+  }, [dispatchRows, dispatchFields, path, setModified]);
 
   const moveRow = useCallback((moveFromIndex: number, moveToIndex: number) => {
     dispatchRows({ type: 'MOVE', moveFromIndex, moveToIndex });
@@ -191,19 +191,6 @@ const ArrayFieldType: React.FC<Props> = (props) => {
     initializeRowState();
   }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
 
-  useEffect(() => {
-    if (typeof rows !== 'undefined') {
-      const disableFormData = rows.length > 0;
-
-      dispatchFields({
-        type: 'UPDATE',
-        path,
-        disableFormData,
-        value: rows.length,
-      });
-    }
-  }, [rows, dispatchFields, path]);
-
   const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [

src/admin/components/forms/field-types/Blocks/index.tsx

@@ -71,22 +71,22 @@ const BlocksField: React.FC<Props> = (props) => {
   const locale = useLocale();
   const operation = useOperation();
   const { dispatchFields, setModified } = formContext;
+  const [selectorIndexOpen, setSelectorIndexOpen] = useState<number>();
 
   const memoizedValidate = useCallback((value, options) => {
     return validate(value, { ...options, minRows, maxRows, required });
   }, [maxRows, minRows, required, validate]);
 
-  const [selectorIndexOpen, setSelectorIndexOpen] = useState<number>();
 
   const {
     showError,
     errorMessage,
     value,
-    setValue,
   } = useField<number>({
     path,
     validate: memoizedValidate,
     condition,
+    disableFormData: rows?.length > 0,
   });
 
   const onAddPopupToggle = useCallback((open) => {
@@ -100,28 +100,28 @@ const BlocksField: React.FC<Props> = (props) => {
     const subFieldState = await buildStateFromSchema({ fieldSchema: block.fields, operation, id, user, locale });
     dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path, blockType });
     dispatchRows({ type: 'ADD', rowIndex, blockType });
-    setValue(value as number + 1);
+    setModified(true);
 
     setTimeout(() => {
       scrollToID(`${path}-row-${rowIndex + 1}`);
     }, 0);
-  }, [path, setValue, value, blocks, dispatchFields, operation, id, user, locale]);
+  }, [path, blocks, dispatchFields, operation, id, user, locale, setModified]);
 
   const duplicateRow = useCallback(async (rowIndex: number, blockType: string) => {
     dispatchFields({ type: 'DUPLICATE_ROW', rowIndex, path });
     dispatchRows({ type: 'ADD', rowIndex, blockType });
-    setValue(value as number + 1);
+    setModified(true);
 
     setTimeout(() => {
       scrollToID(`${path}-row-${rowIndex + 1}`);
     }, 0);
-  }, [dispatchRows, dispatchFields, path, setValue, value]);
+  }, [dispatchRows, dispatchFields, path, setModified]);
 
   const removeRow = useCallback((rowIndex: number) => {
     dispatchRows({ type: 'REMOVE', rowIndex });
     dispatchFields({ type: 'REMOVE_ROW', rowIndex, path });
-    setValue(value as number - 1);
-  }, [path, setValue, value, dispatchFields]);
+    setModified(true);
+  }, [path, dispatchFields, setModified]);
 
   const moveRow = useCallback((moveFromIndex: number, moveToIndex: number) => {
     dispatchRows({ type: 'MOVE', moveFromIndex, moveToIndex });
@@ -198,19 +198,6 @@ const BlocksField: React.FC<Props> = (props) => {
     initializeRowState();
   }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
 
-  useEffect(() => {
-    if (typeof rows !== 'undefined') {
-      const disableFormData = rows.length > 0;
-
-      dispatchFields({
-        type: 'UPDATE',
-        path,
-        disableFormData,
-        value: rows.length,
-      });
-    }
-  }, [rows, dispatchFields, path]);
-
   const hasMaxRows = maxRows && rows?.length >= maxRows;
 
   const classes = [