chore: all batch

Author: zombieJ

src/BatchUpdate.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 
+export type BatchTask = (key: string, callback: VoidFunction) => void;
+
 export interface BatchUpdateRef {
-  batch: (key: string, callback: VoidFunction) => void;
+  batch: BatchTask;
 }
 
 const BatchUpdate = React.forwardRef<BatchUpdateRef>((_, ref) => {

src/Form.tsx

@@ -14,7 +14,7 @@ import type { FormContextProps } from './FormContext';
 import FormContext from './FormContext';
 import { isSimilar } from './utils/valueUtil';
 import ListContext from './ListContext';
-import BatchUpdate, { BatchUpdateRef } from './BatchUpdate';
+import BatchUpdate, { BatchTask, type BatchUpdateRef } from './BatchUpdate';
 
 type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'>;
 
@@ -61,8 +61,6 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   const nativeElementRef = React.useRef<HTMLFormElement>(null);
   const formContext: FormContextProps = React.useContext(FormContext);
 
-  const batchUpdateRef = React.useRef<BatchUpdateRef>(null);
-
   // We customize handle event since Context will makes all the consumer re-render:
   // https://reactjs.org/docs/context.html#contextprovider
   const [formInstance] = useForm(form);
@@ -122,9 +120,42 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
     mountRef.current = true;
   }
 
+  // ======================== Batch Update ========================
+  // zombieJ:
+  // To avoid Form self re-render,
+  // We create a sub component `BatchUpdate` to handle batch update logic.
+  // When the call with do not change immediate, we will batch the update
+  // and flush it in `useLayoutEffect` for next tick.
+
   // Set batch update ref
-  setBatchUpdate(batchUpdateRef);
+  const batchUpdateRef = React.useRef<BatchUpdateRef>(null);
+  const batchUpdateTasksRef = React.useRef<[key: string, fn: VoidFunction][]>([]);
+
+  const tryFlushBatch = () => {
+    if (batchUpdateRef.current) {
+      batchUpdateTasksRef.current.forEach(([key, fn]) => {
+        batchUpdateRef.current.batch(key, fn);
+      });
+      batchUpdateTasksRef.current = [];
+    }
+  };
+
+  // Ref update
+  const setBatchUpdateRef = React.useCallback((batchUpdate: BatchUpdateRef | null) => {
+    batchUpdateRef.current = batchUpdate;
+    tryFlushBatch();
+  }, []);
+
+  // Task list
+
+  const batchUpdate: BatchTask = (key, callback) => {
+    batchUpdateTasksRef.current.push([key, callback]);
+    tryFlushBatch();
+  };
+
+  setBatchUpdate(batchUpdate);
 
+  // ========================== Unmount ===========================
   React.useEffect(
     () => () => destroyForm(clearOnDestroy),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,6 +184,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
     prevFieldsRef.current = fields;
   }, [fields, formInstance]);
 
+  // =========================== Render ===========================
   const formContextValue = React.useMemo(
     () => ({
       ...(formInstance as InternalFormInstance),
@@ -164,7 +196,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   const wrapperNode = (
     <ListContext.Provider value={null}>
       <FieldContext.Provider value={formContextValue}>{childrenNode}</FieldContext.Provider>
-      <BatchUpdate ref={batchUpdateRef} />
+      <BatchUpdate ref={setBatchUpdateRef} />
     </ListContext.Provider>
   );
 

src/interface.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { DeepNamePath } from './namePathType';
 import type { ReducerAction } from './useForm';
-import type { BatchUpdateRef } from './BatchUpdate';
+import type { BatchTask } from './BatchUpdate';
 
 export type InternalNamePath = (string | number)[];
 export type NamePath<T = any> = DeepNamePath<T>;
@@ -234,7 +234,7 @@ export interface InternalHooks {
   setValidateMessages: (validateMessages: ValidateMessages) => void;
   setPreserve: (preserve?: boolean) => void;
   getInitialValue: (namePath: InternalNamePath) => StoreValue;
-  setBatchUpdate: (batchUpdate: React.RefObject<BatchUpdateRef>) => void;
+  setBatchUpdate: (fn: BatchTask) => void;
 }
 
 /** Only return partial when type is not any */

src/useForm.ts

@@ -38,7 +38,7 @@ import {
   matchNamePath,
   setValue,
 } from './utils/valueUtil';
-import { BatchUpdateRef } from './BatchUpdate';
+import { BatchTask, BatchUpdateRef } from './BatchUpdate';
 
 type InvalidateFieldEntity = { INVALIDATE_NAME_PATH: InternalNamePath };
 
@@ -226,15 +226,15 @@ export class FormStore {
   };
 
   // ============================= Batch ============================
-  private batchUpdateRef: React.RefObject<BatchUpdateRef>;
+  private batchUpdate: BatchTask;
 
-  private setBatchUpdate = (batchUpdate: React.RefObject<BatchUpdateRef>) => {
-    this.batchUpdateRef = batchUpdate;
+  private setBatchUpdate = (batchUpdate: BatchTask) => {
+    this.batchUpdate = batchUpdate;
   };
 
   // Batch call the task, only last will be called
   private batch = (key: string, callback: VoidFunction) => {
-    this.batchUpdateRef.current?.batch(key, callback);
+    this.batchUpdate(key, callback);
   };
 
   // ========================== Dev Warning =========================
@@ -665,7 +665,7 @@ export class FormStore {
   private registerField = (entity: FieldEntity) => {
     this.fieldEntities.push(entity);
     const namePath = entity.getNamePath();
-    this.notifyWatch([namePath]);
+    this.batchNotifyWatch(namePath);
 
     // Set initial values
     if (entity.props.initialValue !== undefined) {