Fix use watch trigger re-render twice in React 18 (#612)

* chore: init

* fix: useWatch trigger multiple render in React 18

* chore: ci

Author: zombieJ

.github/workflows/main.yml

@@ -41,7 +41,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
+        run: npm i
 
   lint:
     runs-on: ubuntu-latest

.gitignore

@@ -19,10 +19,11 @@
 .DS_Store
 .vscode
 .idea
+~*
 
 # umi
 .umi
 .umi-production
 .umi-test
 .env.local
-.dumi/
+.dumi/

src/useWatch.ts

@@ -1,4 +1,5 @@
 import warning from 'rc-util/lib/warning';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import FieldContext, { HOOK_MARK } from './FieldContext';
 import type {
   FormInstance,
@@ -8,9 +9,8 @@ import type {
   Store,
   WatchOptions,
 } from './interface';
-import { useState, useContext, useEffect, useRef, useMemo } from 'react';
-import { getNamePath, getValue } from './utils/valueUtil';
 import { isFormInstance } from './utils/typeUtil';
+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']>>;
@@ -141,7 +141,12 @@ function useWatch(...args: [NamePath, FormInstance | WatchOptions<FormInstance>]
         options.preserve ? getFieldsValue(true) : getFieldsValue(),
         namePathRef.current,
       );
-      setValue(initialValue);
+
+      // React 18 has the bug that will queue update twice even the value is not changed
+      // ref: https://github.com/facebook/react/issues/27213
+      if (value !== initialValue) {
+        setValue(initialValue);
+      }
 
       return cancelRegister;
     },

tests/useWatch.test.tsx

@@ -227,8 +227,7 @@ describe('useWatch', () => {
     errorSpy.mockRestore();
   });
 
-  // FIXME: Not work in React 18
-  it.skip('no more render time', async () => {
+  it('no more render time', async () => {
     let renderTime = 0;
 
     const Demo: React.FC = () => {