Chapter 36: Watch (component)

Core Idea

<Watch> (7.65.0+) is useWatch packaged as a renderless component — subscribe to and render specific field values declaratively in JSX instead of extracting a child component just to call the hook.

Key Concepts

• Same props as useWatch: name (single/array/undefined for whole form), control (optional inside FormProvider), compute (selector function), defaultValue (pre-mount fallback), disabled, exact.
• name replaces the older names prop: names still works for backwards compatibility but is deprecated and will be removed in a future major version — use name.
• render: child function receiving the subscribed value(s); re-runs only on relevant changes.

Code Examples

<Watch control={control} name={["foo"]} render={([foo]) => <span>{foo}</span>} />

• What it demonstrates: rendering one field's live value inline, re-rendering only when foo changes — no separate component needed just to call useWatch.

Anti-patterns

• Using the names prop in new code: deprecated in favor of name; will be removed in a future major version.

Key Takeaways

1. <Watch> exists for the same reason <FormState> does — avoid extracting a component solely to isolate a useWatch re-render.
2. Migrate any names usage to name.

Connects To

• usewatch: the hook this component wraps.
• useformstate-formstate: the equivalent renderless component for form state instead of values.