isValid triggers validation function when "onChange" despite "onSubmit" modes

[tomchen]

https://codesandbox.io/s/react-hook-form-basic-forked-5gi2ng , open the console. Due to the fact that mode and reValidateMode are both "onSubmit", when you type something in the First Name field, nothing shows in the console. It's only when you click "Submit" button that "validateFn is executed" shows up. Everything is good.

But when you change formState: { errors } to formState: { errors, isValid }, you would think it's no big deal, but it actually has a huge impact on the (re)validation modes - as soon as you type something in the First Name field, "validateFn is executed" shows in the console. It behaves as if the modes are "onChange" (isValid changes every time, the errors does not change every time, however).

And if the validateFn is an expensive async function, especially an API fetch function, you won't want to perform that when "onChange", you want to perform that when "onSubmit". And this issue causes a lot of trouble.

It took me 2 or 3 hours to find out what had happened, I thought it was a problem of zod, or zodResolver, or Controller etc which I guessed could be incompatible with async validation function, but they are actually all good.

formState is wrapped with a Proxy, I guess something is done with it that causes this, I didn't read the source code though...

Solution: just don't use isValid (errors or even isDirty is perfectly OK to use, it's just isValid that has the issue).

If you want to know if there's any error, just test if formState.errors is an empty object (const isEmptyObject = (obj: any) => typeof obj === 'object' && Object.keys(obj).length === 0;)

Suggestion: Not sure if it's intended and whether isValid's behaviors should be changed, or maybe we can add a third mode - isValidMode for it. But for now at least formState.isValid in the documentation should add a warning or something.

[tomchen]

I guess it is an issue/bug, I close this discussion in favor of #10215