RHF is triggering 3 times as many rerenders on validation

[voinik]

Version Number

7.51.1 and 7.51.2 (latest)

Codesandbox/Expo snack

This link

Steps to reproduce

First of all, thank you very much for this library. It has been my go-to for a long time now!

Reproduction

1. Go to this codesandbox devbox
2. Open the console in the virtual browser on the right (click on "Preview console" in the top right, and then on the "Console" tab)
3. Clear the console for clarity
4. Click on the "Submit" button of the form in the browser
5. Notice the number of entries in the Console went from 0 (because you cleared it) to 6

If I downgrade the react-hook-form version from 7.51.1 to 7.51.0, then you will only see 2 entries in the Console. This means there is some kind of regression. I spent quite a bit digging but I'm not sure what's causing it yet. I noticed the release notes of 7.51.1 mentioned validatingFields. That seems to be related.

I commented out some other components that I was testing with, but they don't seem to be affected (there seems to be no difference between the old and newer versions of react-hook-form, with relation to rerenders).

Also, if you fill in the complete form correctly, and then submit, you will see 4 entries before the onSubmit console.log(data) call, and 4 entries after it, whereas with 7.51.0 you'll only see the onSubmit console.log(data), and then 4 entries after it.

Repo for testing

If you want to quickly play around with this, here's a repo I set up with create-next-app: https://github.com/voinik/rhf-rerender-issue

Expected behaviour

I expect no extra rerenders compared to 7.51.0.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

thanks for the detailed issue report, i don't think we will try to eliminate the re-render, rather reduce the amount. i haven't looked close enough, but some minor extra re-render shouldn't be the root cause of your app perf issue.

[voinik]

No problem!
I agree that eliminating the rerenders isn't feasible. Reducing them to what they were in 7.51.0 was the goal of this report.

And indeed, it's definitely not a bottleneck for performance. I just thought you'd like to know as performance and minimizing rerenders are some of the unique selling points of this library. I'll of course leave it to you if it's worth fixing :)

[bluebill1049]

And indeed, it's definitely not a bottleneck for performance. I just thought you'd like to know as performance and minimizing rerenders are some of the unique selling points of this library. I'll of course leave it to you if it's worth fixing :)

thank you for your understanding, I will take a look at this when i get my hands on it.

[bluebill1049]

could you double check if you are not subscribed to validateFields, we have regression test for render count which is not affected: https://github.com/react-hook-form/react-hook-form/blob/master/cypress/e2e/basic.cy.ts#L100

File: https://github.com/react-hook-form/react-hook-form/blob/master/cypress/e2e/basic.cy.ts#L100

[voinik]

I think you mean validatingFields? But no, it's not being used in my example repo 😕

[voinik]

I'm going to dig a bit, but shadcn is using this in all form field components:

  const { getFieldState, formState } = useFormContext()

[voinik]

Dug around a bit and I'm closer. It's happening in src/logic/createFormControl.ts, specifically here:

    const _executeSchema = async (name) => {
        _updateIsValidating(name, true); // <-- HERE
        const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
        _updateIsValidating(name); // <-- AND HERE
        return result;
    };

If I remove the lines I commented (they didn't exist before the PR I mention below), the additional rerenders no longer happen.

However, in the PR that introduced this change (#11624), you went from handling schemas in a synchronous way to an asynchronous way. I assume you added the _updateIsValidating(..) to keep track of the state of the validation?

Perhaps we should just take the rerender hit, and leave it as is? Or is there another way to deal with this?