# FormState

> A renderless React component that subscribes to form state changes and re-renders children only when the relevant state updates occur.

Source: https://react-hook-form.com/docs/useformstate/formstate

## `FormState:` [FormStateProps](https://react-hook-form.com/ts#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

---

| Name       | Type                                     | Description                                                                                                                                                                                                                                                                                                                                                                          |
| ---------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `control`  | `Object`              | [`control`](https://react-hook-form.com/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                                                                                                                                                                                      |
| `name`     | `string \| string[]` | Provide a single input name, an array of them, or subscribe to all inputs' formState update.                                                                                                                                                                                                                                                                                         |
| `disabled` | `boolean = false`     | Option to disable the subscription.                                                                                                                                                                                                                                                                                                                                                  |
| `exact`    | `boolean = false`     | Enable 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`](https://react-hook-form.com/docs/useformstate) for details. |
| `render`   | `Function`            | Subscribes 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: Note**
>
> This component was previously documented as `FormStateSubscribe`, renamed to `FormState` on this page as of 2026-08-01.
>

### Examples

---

```tsx
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:

  ```javascript
  <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.