issue: Infinite Loop: Submitting FormContext with Nested FormContext causes repeated error rendering

[ifozest]

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#Howtoworkwithmodalortabforms
My 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.

1. Go to sandbox link
2. Open console
3. Click on the button "Hit me"
4. No state change console logs, Observe the message "Page unresponsive"; page is dead

Expected behaviour

No infinite lopp

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[ifozest]

Well, seems like putting formContext object in useEffect deps was not a good idea after all

[bluebill1049]

https://react-hook-form.com/docs/useform/formstate

formState is updated in batch. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.