chore: warning for dynamic watch namePath.

close ant-design/ant-design#40605

Author: zombieJ

src/useWatch.ts

@@ -2,7 +2,7 @@ import type { FormInstance } from '.';
 import { FieldContext } from '.';
 import warning from 'rc-util/lib/warning';
 import { HOOK_MARK } from './FieldContext';
-import type { InternalFormInstance, NamePath, Store } from './interface';
+import type { InternalFormInstance, InternalNamePath, NamePath, Store } from './interface';
 import { useState, useContext, useEffect, useRef, useMemo } from 'react';
 import { getNamePath, getValue } from './utils/valueUtil';
 
@@ -17,6 +17,19 @@ export function stringify(value: any) {
   }
 }
 
+const useWatchWarning =
+  process.env.NODE_ENV !== 'production'
+    ? (namePath: InternalNamePath) => {
+        const fullyStr = namePath.join('__RC_FIELD_FORM_SPLIT__');
+        const nameStrRef = useRef(fullyStr);
+
+        warning(
+          nameStrRef.current === fullyStr,
+          '`useWatch` is not support dynamic `namePath`. Please provide static instead.',
+        );
+      }
+    : () => {};
+
 function useWatch<
   TDependencies1 extends keyof GetGeneric<TForm>,
   TForm extends FormInstance,
@@ -82,6 +95,8 @@ function useWatch(...args: [NamePath, FormInstance]) {
   const namePathRef = useRef(namePath);
   namePathRef.current = namePath;
 
+  useWatchWarning(namePath);
+
   useEffect(
     () => {
       // Skip if not exist form instance

tests/useWatch.test.tsx

@@ -386,4 +386,25 @@ describe('useWatch', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('dynamic change warning', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const Demo: React.FC = () => {
+      const [form] = Form.useForm();
+      const [watchPath, setWatchPath] = React.useState('light');
+      Form.useWatch(watchPath, form);
+
+      React.useEffect(() => {
+        setWatchPath('bamboo');
+      }, []);
+
+      return <Form form={form} />;
+    };
+    render(<Demo />);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: `useWatch` is not support dynamic `namePath`. Please provide static instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });