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 = falseThis prop will enable an exact match for input name subscriptions.
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