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)

[JibranMachiavelli]

Yes, this is expected, and switching to useFormState / useController is the right fix.

formState is a Proxy. Reading a property on it (e.g. errors) is what subscribes to that slice of state. The proxy you get from useFormContext() is the same object useForm() returned in App:

// src/useForm.ts
_formControl.current.formState = React.useMemo(
  () => getProxyFormState(formState, control),
  [control, formState],
)

FormProvider just passes it down. So when TelField destructures formState: { errors } from the context, it's not creating a subscription for TelField. It's flipping the errors flag on the host's proxy. From then on, every error change re-renders App (the component that owns useForm), and TelField re-renders because its parent did, not because of its own subscription.

In Case B nobody reads errors, so the host never subscribes and trigger doesn't re-render App.

Ways to keep the host quiet:

// subscribe only this component, only to this field
const { errors } = useFormState({ name: 'tel' })
// or
const { fieldState } = useController({ name: 'tel' })
// or, for a one-off read in an event handler (no subscription)
const { getFieldState } = useFormContext()

Rule of thumb: inside children, use useFormContext() for methods (register, control, setValue, …), and read state through useFormState / useController / useWatch, which create isolated subscriptions.

[tony-hsueh]

Thanks for the clear explanation! So the key point is that useFormContext() returns the same proxy as useForm(), which is why reading errors in the child re-renders the parent. I’ll stick with useFormState / useController for reading state.

Thanks for taking the time to answer.