issue: useFormState does not isolate at custom hook level.

[CodAffection]

Version Number

7.45.4

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/old-wood-jdhn5w

Steps to reproduce

I'm constructing a form for following type.

type FormData = {
  userName: string;
  name: {
  firstName:string,
  lastName:string
   }
}

• So created separete type for name called NameType in /types/index.ts.
• A seprate component for name fields is created as components/NameForm.
• I nested NameForm within main form with <FormProvider>.
• Tried to retrive errors from using useFormState

Expected behaviour

• useFormState does not isolate the formState or errors of given field. In fact it having main form errors also ie. errors from userName field.

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

[Moshyfawn]

This is the current API design choice for how we handle errors: take a look at #10065 for more info.

TL;DR useFormState subscribes to the fields errors according to the provided names but the returned errors object is unchanged.

Now, in your example, you subscribe to the errors form state at the root of your form by destructuring the errors property from formState which leads to the whole form being subscribed to the errors updates. This leads to the behavior you see in your codesandbox: the errors property in the child component is "up-to-date" with the latest errors.

[CodAffection]

Is there any other best practise to do rather than subscribing to the errors at the root of the form?
also documentation says

This useFormState custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level.

but render count shows it's not . Am I missing something?

[CodAffection]

@Moshyfawn, Thanks your replies, please give you comments.

If useFormState doesn't isolate at the child component level then what is the difference in using it against destructuring formState through useFormContext ?

[CodAffection]

This is the current API design choice for how we handle errors: take a look at #10065 for more info.

TL;DR useFormState subscribes to the fields errors according to the provided names but the returned errors object is unchanged.

Now, in your example, you subscribe to the errors form state at the root of your form by destructuring the errors property from formState which leads to the whole form being subscribed to the errors updates. This leads to the behavior you see in your codesandbox: the errors property in the child component is "up-to-date" with the latest errors.

@Moshyfawn Thank you, I took time to understand what you said from this the last example of the documentation page : https://react-hook-form.com/docs/useformstate

[CodAffection]

Could you tell me the significants of exact and disable props of useFormState?
exact is there other kind matching for name other than exact?
if I disable the subscription while invoking the hook, then how can I enable the subscription?

[CodAffection]

@bluebill1049 @Moshyfawn
Sorry for bothering you guys, I've been thoroughly studing react hook form library.
I understood significants disable when using with watch method.
could you please tell me how the exact is helpful?
documentation says (useFormState)

This prop will enable an exact match for input name subscriptions.

Does that mean, that it will loose subscription once re-rendering of root component happens. please clarify.