fix: useWatch object trigger re-render (#433)

* test: test driven

* test: test driven

* fix: object path

Author: zombieJ

src/useWatch.ts

@@ -3,12 +3,20 @@ import { FieldContext } from '.';
 import warning from 'rc-util/lib/warning';
 import { HOOK_MARK } from './FieldContext';
 import type { InternalFormInstance, NamePath, Store } from './interface';
-import { useState, useContext, useEffect, useRef } from 'react';
+import { useState, useContext, useEffect, useRef, useMemo } from 'react';
 import { getNamePath, getValue } from './utils/valueUtil';
 
 type ReturnPromise<T> = T extends Promise<infer ValueType> ? ValueType : never;
 type GetGeneric<TForm extends FormInstance> = ReturnPromise<ReturnType<TForm['validateFields']>>;
 
+function stringify(value: any) {
+  try {
+    return JSON.stringify(value);
+  } catch (err) {
+    return Math.random();
+  }
+}
+
 function useWatch<
   TDependencies1 extends keyof GetGeneric<TForm>,
   TForm extends FormInstance,
@@ -52,8 +60,10 @@ function useWatch<ValueType = Store>(dependencies: NamePath, form?: FormInstance
 
 function useWatch(dependencies: NamePath = [], form?: FormInstance) {
   const [value, setValue] = useState<any>();
-  const valueCacheRef = useRef<any>();
-  valueCacheRef.current = value;
+
+  const valueStr = useMemo(() => stringify(value), [value]);
+  const valueStrRef = useRef(valueStr);
+  valueStrRef.current = valueStr;
 
   const fieldContext = useContext(FieldContext);
   const formInstance = (form as InternalFormInstance) || fieldContext;
@@ -83,7 +93,10 @@ function useWatch(dependencies: NamePath = [], form?: FormInstance) {
 
       const cancelRegister = registerWatch(store => {
         const newValue = getValue(store, namePathRef.current);
-        if (valueCacheRef.current !== newValue) {
+        const nextValueStr = stringify(newValue);
+
+        // Compare stringify in case it's nest object
+        if (valueStrRef.current !== nextValueStr) {
           setValue(newValue);
         }
       });

tests/useWatch.test.tsx

@@ -275,6 +275,7 @@ describe('useWatch', () => {
       });
     expect(renderTime).toEqual(2);
   });
+
   it('typescript', () => {
     type FieldType = {
       main?: string;
@@ -307,4 +308,46 @@ describe('useWatch', () => {
 
     mount(<Demo />);
   });
+
+  // https://github.com/react-component/field-form/issues/431
+  it('not trigger effect', () => {
+    let updateA = 0;
+    let updateB = 0;
+
+    const Demo = () => {
+      const [form] = Form.useForm();
+      const userA = Form.useWatch(['a'], form);
+      const userB = Form.useWatch(['b'], form);
+
+      React.useEffect(() => {
+        updateA += 1;
+        console.log('Update A', userA);
+      }, [userA]);
+      React.useEffect(() => {
+        updateB += 1;
+        console.log('Update B', userB);
+      }, [userB]);
+
+      return (
+        <Form form={form}>
+          <Field name={['a', 'name']}>
+            <Input />
+          </Field>
+          <Field name={['b', 'name']}>
+            <Input />
+          </Field>
+        </Form>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+
+    console.log('Change!');
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', { target: { value: 'bamboo' } });
+
+    expect(updateA > updateB).toBeTruthy();
+  });
 });