Why does using useFormContext with formState in a child component cause the parent(useForm) component re-render when validation fails?

[tony-hsueh]

Version Number
7.47.0 & 7.60.0

Codesandbox
https://codesandbox.io/p/sandbox/wp53c3?file=%2Fsrc%2FApp.js%3A44%2C7-44%2C21

Case A: Triggers component that calls useForm (App component) re-render

• In the child component (TelField), I use useFormContext() to access errors
• Clear the name field and trigger validation by calling trigger on blur. At this point, you can see that the App component re-renders.

Case B: Does NOT trigger component that calls useForm (App component) re-render

• Comment out the TelField to make sure nothing is using errors from useFormContext.
• Clear the name field and trigger validation by calling trigger on blur. At this point, you can see that the App component doesn't re-render.

I'm wondering:

• Is this behavior expected when using formState: { errors } from useFormContext ?
• is there a recommended way to avoid re-renders in the component that calls useForm ? (Currently, I replaced useFormContext with useFormState or useController)