Skip to content

FormState

Renderless component for subscribing to form state changes.

</> FormState: FormStateProps Since v7.68.0

A React Hook Form component that provides the same functionality as useFormState, but in component form. Instead of using the hook inside another component, you can use <FormState /> directly in your JSX to subscribe to and render form state.

Props

NameTypeDescription
controlObjectcontrol object provided by useForm. It's optional if you are using FormProvider.
namestring | string[] Provide a single input name, an array of them, or subscribe to all inputs' formState update.
disabledboolean = falseOption to disable the subscription.
exactboolean = falseEnable exact name matching. When false (default), the subscription fires when the subscribed name is a prefix of the changed field name, or vice versa. Since v7.81.0 When true, it fires when the subscribed field itself or one of its ancestor paths is updated, but not when a nested child path changes. See useFormState for details.
renderFunctionSubscribes to form state of specified form field(s) and re-renders its child function whenever the form state changes. This allows you to declaratively consume form state in JSX without manually wiring up state.
NOTE

This component was previously documented as FormStateSubscribe, renamed to FormState on this page as of 2026-08-01.

Examples:
import { useForm, FormState } from "react-hook-form"


const App = () => {
  const { register, control } = useForm()


  return (
    <div>
      <form>
        <input {...register("foo", { min: 3 })} />
        <input {...register("bar")} />
        {/* re-render only when form state of `foo` changes */}
        <FormState
          control={control}
          name="foo"
          render={({ errors }) => <span>{errors.foo?.message}</span>}
        />
      </form>
    </div>
  )
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider starring and supporting it.

Edit