Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RHF is triggering 3 times as many rerenders on validation #11769

Closed
1 task done
voinik opened this issue Apr 8, 2024 · 4 comments
Closed
1 task done

RHF is triggering 3 times as many rerenders on validation #11769

voinik opened this issue Apr 8, 2024 · 4 comments
Labels
question Further information is requested

Comments

@voinik
Copy link

voinik commented Apr 8, 2024

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
Copy link
Member

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.

@bluebill1049 bluebill1049 added the question Further information is requested label Apr 9, 2024
@voinik
Copy link
Author

voinik commented Apr 10, 2024

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
Copy link
Member

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.

@vgoreev

This comment was marked as off-topic.

@react-hook-form react-hook-form locked and limited conversation to collaborators Apr 14, 2024
@bluebill1049 bluebill1049 converted this issue into discussion #11780 Apr 14, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants