feat: review

Author: crazyair

docs/examples/useWatch-selector.tsx

@@ -11,8 +11,8 @@ type FieldType = {
 
 export default () => {
   const [form] = Form.useForm<FieldType>();
-  const base = Form.useWatch(values => ({ newName: values.name }), form);
-  console.log('base', base);
+  const firstEmptyObject = Form.useWatch(values => ({ newName: values.name }), form);
+  console.log('firstEmptyObject', firstEmptyObject);
 
   const values = Form.useWatch(
     values => ({ init: values.init, newName: values.name, newAge: values.age }),

src/useWatch.ts

@@ -92,10 +92,13 @@ function useWatch(
   const options = isFormInstance(_form) ? { form: _form } : _form;
   const form = options.form;
 
-  const [value, setValue] = useState<any>(
-    typeof dependencies === 'function' ? dependencies({}) : undefined,
+  const dependenciesMemo = useMemo(
+    () => (typeof dependencies === 'function' ? dependencies({}) : undefined),
+    [dependencies],
   );
 
+  const [value, setValue] = useState<any>(dependenciesMemo);
+
   const valueStr = useMemo(() => stringify(value), [value]);
   const valueStrRef = useRef(valueStr);
   valueStrRef.current = valueStr;

tests/useWatch.test.tsx

@@ -518,4 +518,22 @@ describe('useWatch', () => {
     await changeValue(input[0], 'bamboo2');
     expect(container.querySelector<HTMLDivElement>('.values')?.textContent).toEqual('bamboo2');
   });
+  it('selector by first no undefined', async () => {
+    const list: any[] = [];
+    const Demo = () => {
+      const [form] = Form.useForm<{ name?: string }>();
+      const data = Form.useWatch(values => values, form);
+      list.push(data);
+      return (
+        <Form form={form}>
+          <Field name="name" initialValue="bamboo">
+            <Input />
+          </Field>
+        </Form>
+      );
+    };
+    render(<Demo />);
+    expect(list[0]).toEqual({});
+    expect(list[1]).toEqual({ name: 'bamboo' });
+  });
 });