Chapter 34: FormState (component)

Core Idea

<FormState> (7.68.0+) is useFormState packaged as a renderless component — subscribe to form state declaratively in JSX via a render prop instead of calling the hook in a separate component.

Key Concepts

• Same props as useFormState: control (optional inside FormProvider), name (single/array/all), disabled, exact.
• render: child render-prop function receiving the subscribed form state; re-runs only when that state changes.
• Naming note: this component was previously documented as FormStateSubscribe; renamed to FormState (2026-08-01 docs update) — if older material or code references FormStateSubscribe, it's the same component.
• Same isolation benefit as the hook: scoping name limits re-renders to when that field's state actually changes, without needing to extract a separate child component just to call useFormState.

Code Examples

<FormState
  control={control}
  name="foo"
  render={({ errors }) => <span>{errors.foo?.message}</span>}
/>

• What it demonstrates: rendering one field's error message inline, re-rendering only when foo's form state changes — no separate child component needed.

Anti-patterns

• Looking for FormStateSubscribe in current docs/exports and not finding it: it was renamed to FormState — same API.

Key Takeaways

1. <FormState> exists so you don't have to extract a child component solely to call useFormState for re-render isolation.
2. It was renamed from FormStateSubscribe; both names refer to the same component in different doc eras.

Connects To

• useformstate: the hook this component wraps.
• useformstate-errormessage: a common pairing — subscribe with <FormState>, render with <ErrorMessage>.