fix: onMetaChange trigger when meta not changed (#604)

* test: test driven

* fix: meta loop call

Author: zombieJ

src/Field.tsx

@@ -1,5 +1,6 @@
 import toChildrenArray from 'rc-util/lib/Children/toArray';
 import warning from 'rc-util/lib/warning';
+import isEqual from 'rc-util/lib/isEqual';
 import * as React from 'react';
 import type {
   FieldEntity,
@@ -54,6 +55,8 @@ interface ChildProps {
   [name: string]: any;
 }
 
+export type MetaEvent = Meta & { destroy?: boolean };
+
 export interface InternalFieldProps<Values = any> {
   children?:
     | React.ReactElement
@@ -77,7 +80,7 @@ export interface InternalFieldProps<Values = any> {
   messageVariables?: Record<string, string>;
   initialValue?: any;
   onReset?: () => void;
-  onMetaChange?: (meta: Meta & { destroy?: boolean }) => void;
+  onMetaChange?: (meta: MetaEvent) => void;
   preserve?: boolean;
 
   /** @private Passed by Form.List props. Do not use since it will break by path check. */
@@ -221,10 +224,23 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     }));
   };
 
+  // Event should only trigger when meta changed
+  private metaCache: MetaEvent = null;
+
   public triggerMetaEvent = (destroy?: boolean) => {
     const { onMetaChange } = this.props;
 
-    onMetaChange?.({ ...this.getMeta(), destroy });
+    if (onMetaChange) {
+      const meta = { ...this.getMeta(), destroy };
+
+      if (!isEqual(this.metaCache, meta)) {
+        onMetaChange(meta);
+      }
+
+      this.metaCache = meta;
+    } else {
+      this.metaCache = null;
+    }
   };
 
   // ========================= Field Entity Interfaces =========================

tests/index.test.tsx

@@ -838,4 +838,29 @@ describe('Form.Basic', () => {
       Array.from(container.querySelectorAll<HTMLInputElement>('input')).map(input => input?.value),
     ).toEqual(['bamboo', 'tiny', 'light', 'match']);
   });
+
+  it('onMetaChange should only trigger when meta changed', () => {
+    const onMetaChange = jest.fn();
+    const formRef = React.createRef<FormInstance>();
+
+    const Demo: React.FC = () => (
+      <Form ref={formRef}>
+        <Field onMetaChange={onMetaChange} shouldUpdate={() => false}>
+          {() => null}
+        </Field>
+      </Form>
+    );
+
+    render(<Demo />);
+
+    formRef.current?.setFieldsValue({});
+    onMetaChange.mockReset();
+
+    // Re-render should not trigger `onMetaChange`
+    for (let i = 0; i < 10; i += 1) {
+      formRef.current?.setFieldsValue({});
+    }
+
+    expect(onMetaChange).toHaveBeenCalledTimes(0);
+  });
 });