fix: No more render times (#415)

* test: test driven

* fix: no more render times

Author: zombieJ

src/useWatch.ts

@@ -8,6 +8,8 @@ import { getNamePath, getValue } from './utils/valueUtil';
 
 const useWatch = <ValueType = Store>(dependencies: NamePath = [], form?: FormInstance) => {
   const [value, setValue] = useState<ValueType>();
+  const valueCacheRef = useRef<ValueType>();
+  valueCacheRef.current = value;
 
   const fieldContext = useContext(FieldContext);
   const formInstance = (form as InternalFormInstance) || fieldContext;
@@ -37,7 +39,9 @@ const useWatch = <ValueType = Store>(dependencies: NamePath = [], form?: FormIns
 
       const cancelRegister = registerWatch(store => {
         const newValue = getValue(store, namePathRef.current);
-        setValue(newValue);
+        if (valueCacheRef.current !== newValue) {
+          setValue(newValue);
+        }
       });
 
       // TODO: We can improve this perf in future
@@ -46,10 +50,10 @@ const useWatch = <ValueType = Store>(dependencies: NamePath = [], form?: FormIns
 
       return cancelRegister;
     },
-    /* eslint-disable react-hooks/exhaustive-deps */
+
     // We do not need re-register since namePath content is the same
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
-    /* eslint-enable */
   );
 
   return value;

tests/useWatch.test.tsx

@@ -219,4 +219,60 @@ describe('useWatch', () => {
       'Warning: useWatch requires a form instance since it can not auto detect from context.',
     );
   });
+
+  it('no more render time', () => {
+    let renderTime = 0;
+
+    const Demo = () => {
+      const [form] = Form.useForm();
+      const name = Form.useWatch<string>('name', form);
+
+      renderTime += 1;
+
+      return (
+        <Form form={form}>
+          <Field name="name">
+            <Input />
+          </Field>
+          <Field name="age">
+            <Input />
+          </Field>
+          <div className="value">{name}</div>
+        </Form>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+    expect(renderTime).toEqual(1);
+
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', {
+        target: {
+          value: 'bamboo',
+        },
+      });
+    expect(renderTime).toEqual(2);
+
+    wrapper
+      .find('input')
+      .last()
+      .simulate('change', {
+        target: {
+          value: '123',
+        },
+      });
+    expect(renderTime).toEqual(2);
+
+    wrapper
+      .find('input')
+      .last()
+      .simulate('change', {
+        target: {
+          value: '123456',
+        },
+      });
+    expect(renderTime).toEqual(2);
+  });
 });