Skip to content
React Hook Form
Star

FormState

Renderless component for subscribing to form state changes.

View MarkdownOpen in ChatGPTOpen in Claude

</> 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>
  )
}

Tips

  • Use <FormState /> for small parts of the UI that depend on form state, for example a submit button, without creating a new component:

    <FormState
      control={control}
      render={({ isSubmitting }) => (
        <button disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save"}
        </button>
      )}
    />

  • The render function receives the same Proxy as useFormState, so it subscribes only to the state you read in it.

  • Pass name to limit updates to one field or one section of the form.