issue: Maximum Update Depth Exceeded error when using isValidating flag

[sharonsooyeon]

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/laughing-cori-3fcn9m?file=%2Fsrc%2FApp.js%3A11%2C32

Steps to reproduce

1. Open the chrome devtools inspector in the code sandbox link.
2. Rapidly type in input inside any of the <input /> fields, like Name or Description.
3. Observe that the value of isValidating is updated onChange, rather than on blur or after the user has finished typing in input. (Value of isValidating is being console logged out on line 31).

Expected behaviour

The Max Update Depth Exceeded error does not occur on the code sandbox link but you can see that the isValidating flag is being updated too often in the example. This is a problem in more data-intensive applications like the one in which this error was discovered, where it also causes unacceptable lag when filling out the form inputs. When I revert to a previous version of react-hook-form that does not contain this bug, the expected behavior is to politely wait until the user has finished typing input to revalidate (or onBlur, onTouched, or the specified mode). Specifically, the excessive re-renders cause an issue for the use of the isValidating flag to determine whether the submit button should be disabled, which we are doing in the vast majority of our forms.

Based on my research and experimentation, I believe the offending commit is in 7.51.1.

What browsers are you seeing the problem on?

Chrome

Relevant log output

chunk-4SMLELHS.js?v=b1477510:521 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
printWarning                                                                          @chunk-4SMLELHS.js?v=b1477510:521
error                                                                                 @chunk-4SMLELHS.js?v=b1477510:505
checkForNestedUpdates                                                                 @chunk-4SMLELHS.js?v=b1477510:19693
scheduleUpdateOnFiber                                                                 @chunk-4SMLELHS.js?v=b1477510:18561
dispatchSetState                                                                      @chunk-4SMLELHS.js?v=b1477510:12423
next                                                                                  @react-hook-form.js?v=ea906d14:1858
next                                                                                  @react-hook-form.js?v=ea906d14:878
_updateIsValidating                                                                   @react-hook-form.js?v=ea906d14:1123
executeBuiltInValidation                                                              @react-hook-form.js?v=ea906d14:1262
await in executeBuiltInValidation (async)         
onChange                                                                              @react-hook-form.js?v=ea906d14:1410
await in onChange (async)         
callCallback2                                                                         @chunk-4SMLELHS.js?v=b1477510:3674
invokeGuardedCallbackDev                                                              @chunk-4SMLELHS.js?v=b1477510:3699
invokeGuardedCallback                                                                 @chunk-4SMLELHS.js?v=b1477510:3733
invokeGuardedCallbackAndCatchFirstError                                               @chunk-4SMLELHS.js?v=b1477510:3736
executeDispatch                                                                       @chunk-4SMLELHS.js?v=b1477510:7016
processDispatchQueueItemsInOrder                                                      @chunk-4SMLELHS.js?v=b1477510:7036
processDispatchQueue                                                                  @chunk-4SMLELHS.js?v=b1477510:7045
dispatchEventsForPlugins                                                              @chunk-4SMLELHS.js?v=b1477510:7053
(anonymous)                                                                           @chunk-4SMLELHS.js?v=b1477510:7177
batchedUpdates$1                                                                      @chunk-4SMLELHS.js?v=b1477510:18941
batchedUpdates                                                                        @chunk-4SMLELHS.js?v=b1477510:3579
dispatchEventForPluginEventSystem                                                     @chunk-4SMLELHS.js?v=b1477510:7176
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay       @chunk-4SMLELHS.js?v=b1477510:5478
dispatchEvent                                                                         @chunk-4SMLELHS.js?v=b1477510:5472
dispatchDiscreteEvent                                                                 @chunk-4SMLELHS.js?v=b1477510:5449

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

Expected behaviour for async valdiation there is no debounce or throttle which you may want to consider to impl