formstate errors not updating across components

[MonkeeMan1]

Hello, I have a savebar component which I aim to display some of the errors in my form.

I am using the following code:

export const SaveBar = ({ handleSubmit }: Props) => {
    const form = useFormContext();

    if (
        !form.formState.isDirty ||
        !Object.keys(form.formState.dirtyFields).length
    )
        return;

    return (
              <div>
                    <h2>You have unsaved changes!</h2>
                    <h1>{JSON.stringify(form.formState.errors)}</h1>
                </div>

When there is a form error, the error appears. However, when the user fixes the form error the error state is not updated in the form.formstate.errors property. How am I supposed to get up to date form state errors?

I have enabled revalidateMode to onChange but this had no effect.

    const form = useForm<z.infer<typeof updateApplicationSchema>>({
        resolver: zodResolver(updateApplicationSchema),
        mode: "onChange",
        reValidateMode: "onChange",

[MonkeeMan1]

bump

[chrisjcthomas]

This is the formState Proxy subscription trap. formState only triggers re-renders for the keys you actually read during render. Your SaveBar reads form.formState.isDirty and form.formState.errors through the form object, so the component never subscribes to errors updates — it renders once, shows the first error, then goes stale when the user fixes the field. reValidateMode: 'onChange' doesn't help because the component isn't listening.

Destructure what you need at the top so the Proxy registers the subscription:

import { useFormContext, useFormState } from 'react-hook-form';

export const SaveBar = ({ handleSubmit }: Props) => {
  const { control } = useFormContext();
  const { errors, isDirty, dirtyFields } = useFormState({ control });

  if (!isDirty || !Object.keys(dirtyFields ?? {}).length) return null;

  return (
    <div>
      <h2>You have unsaved changes!</h2>
      <pre>{JSON.stringify(errors, null, 2)}</pre>
    </div>
  );
};

useFormState({ control }) is preferable to useFormContext().formState here because it subscribes this component in isolation instead of re-rendering everything under the provider on each keystroke. Also return null rather than bare return; — returning undefined works but breaks if you later add hooks below that early exit.