fix: batch remove laggy

Author: zombieJ

docs/demo/debug.md

@@ -0,0 +1,4 @@
+## debug
+
+
+<code src="../examples/debug.tsx"></code>

docs/examples/debug.tsx

@@ -0,0 +1,51 @@
+import Form, { Field } from 'rc-field-form';
+import React from 'react';
+
+function WatchCom({ name }: { name: number }) {
+  const data = Form.useWatch(name);
+  return data;
+}
+
+export default function App() {
+  const [form] = Form.useForm();
+  const [open, setOpen] = React.useState<boolean>(true);
+
+  const data = React.useMemo(() => {
+    return Array.from({ length: 1 * 500 }).map((_, i) => ({
+      key: i,
+      name: `Edward King ${i}`,
+      age: 32,
+      address: `London, Park Lane no. ${i}`,
+    }));
+  }, []);
+
+  return (
+    <Form form={form}>
+      <div className="App">
+        {/* When I made the switch, it was very laggy */}
+        <button
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          Switch
+        </button>
+        <WatchCom name={0} />
+        <WatchCom name={1} />
+        {open ? (
+          <div className="flex gap-[5px] flex-wrap">
+            {data?.map(item => {
+              return (
+                <Field key={item.name} name={item.name}>
+                  <input />
+                </Field>
+              );
+            })}
+          </div>
+        ) : (
+          <h2>some thing</h2>
+        )}
+      </div>
+    </Form>
+  );
+}

src/BatchUpdate.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export interface BatchUpdateRef {
+  batch: (key: string, callback: VoidFunction) => void;
+}
+
+const BatchUpdate = React.forwardRef<BatchUpdateRef>((_, ref) => {
+  const [batchInfo, setBatchInfo] = React.useState<Record<string, VoidFunction>>({});
+
+  React.useLayoutEffect(() => {
+    const keys = Object.keys(batchInfo);
+    if (keys.length) {
+      keys.forEach(key => {
+        batchInfo[key]?.();
+      });
+      setBatchInfo({});
+    }
+  }, [batchInfo]);
+
+  React.useImperativeHandle(ref, () => ({
+    batch: (key, callback) => {
+      setBatchInfo(ori => ({
+        ...ori,
+        [key]: callback,
+      }));
+    },
+  }));
+
+  return null;
+});
+
+export default BatchUpdate;

src/Form.tsx

@@ -14,6 +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';
 
 type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'>;
 
@@ -60,6 +61,8 @@ 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);
@@ -70,6 +73,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
     setValidateMessages,
     setPreserve,
     destroyForm,
+    setBatchUpdate,
   } = (formInstance as InternalFormInstance).getInternalHooks(HOOK_MARK);
 
   // Pass ref with form instance
@@ -118,6 +122,9 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
     mountRef.current = true;
   }
 
+  // Set batch update ref
+  setBatchUpdate(batchUpdateRef);
+
   React.useEffect(
     () => () => destroyForm(clearOnDestroy),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -157,6 +164,7 @@ const Form: React.ForwardRefRenderFunction<FormRef, FormProps> = (
   const wrapperNode = (
     <ListContext.Provider value={null}>
       <FieldContext.Provider value={formContextValue}>{childrenNode}</FieldContext.Provider>
+      <BatchUpdate ref={batchUpdateRef} />
     </ListContext.Provider>
   );
 

src/interface.ts

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

src/useForm.ts

@@ -38,6 +38,7 @@ import {
   matchNamePath,
   setValue,
 } from './utils/valueUtil';
+import { BatchUpdateRef } from './BatchUpdate';
 
 type InvalidateFieldEntity = { INVALIDATE_NAME_PATH: InternalNamePath };
 
@@ -119,6 +120,7 @@ export class FormStore {
         setPreserve: this.setPreserve,
         getInitialValue: this.getInitialValue,
         registerWatch: this.registerWatch,
+        setBatchUpdate: this.setBatchUpdate,
       };
     }
 
@@ -214,6 +216,27 @@ export class FormStore {
     }
   };
 
+  private notifyWatchNamePathList: InternalNamePath[] = [];
+  private batchNotifyWatch = (namePath: InternalNamePath) => {
+    this.notifyWatchNamePathList.push(namePath);
+    this.batch('notifyWatch', () => {
+      this.notifyWatch(this.notifyWatchNamePathList);
+      this.notifyWatchNamePathList = [];
+    });
+  };
+
+  // ============================= Batch ============================
+  private batchUpdateRef: React.RefObject<BatchUpdateRef>;
+
+  private setBatchUpdate = (batchUpdate: React.RefObject<BatchUpdateRef>) => {
+    this.batchUpdateRef = batchUpdate;
+  };
+
+  // Batch call the task, only last will be called
+  private batch = (key: string, callback: VoidFunction) => {
+    this.batchUpdateRef.current?.batch(key, callback);
+  };
+
   // ========================== Dev Warning =========================
   private timeoutId: any = null;
 
@@ -682,7 +705,7 @@ export class FormStore {
         }
       }
 
-      this.notifyWatch([namePath]);
+      this.batchNotifyWatch(namePath);
     };
   };