This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
issue: Infinite Loop: Submitting FormContext with Nested FormContext causes repeated error rendering #11799
Closed
1 task done
Version Number
7.51.3
Codesandbox/Expo snack
https://codesandbox.io/p/sandbox/react-hook-form-infinite-loop-3plm39
Steps to reproduce
Hi,
I'm encountering an issue with nested
FormContext
components in my React application that uses the approach outlined here for handling tabbed forms: https://react-hook-form.com/faqs#HowtoworkwithmodalortabformsMy application has a complex form composed of multiple sub-forms. I want to trigger validation on all visible forms simultaneously to display any built-in errors (like required) and custom errors based on business logic.
I've isolated the problem to the rendering of formState.errors within a nested
FormContext
. This is causing an infinite loop rendering error when submitting the form.I made a codesanbox with minimum reproducible code. Note that deleting line 18 in
InsideForm
component will resolve the issue, but in this case I won't be able to display any errors on the screen.I noticed that I can call handleSubmit directly on the useForm instance to avoid this issue.
Expected behaviour
No infinite lopp
What browsers are you seeing the problem on?
Chrome
Relevant log output
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: