Chapter 5: FAQs

Core Idea

The FAQ page collects the recurring gotchas of an uncontrolled-first form library: why performance is good, why the first keystroke can "not work," how RHF compares to Formik/Redux Form, and how watch/getValues/local state differ.

Key Concepts

• Uncontrolled-first performance: register captures a ref directly instead of wiring value/onChange, so typing doesn't re-render the whole form; Controller/useController isolate re-renders to just the controlled field when a component can't be uncontrolled.
• defaultValue vs value: registered inputs must use defaultValue/defaultChecked, never value — setting value fights the uncontrolled model and is the #1 cause of "first keystroke doesn't work."
• watch vs getValues vs local state: watch subscribes and re-renders on change; getValues reads current values without subscribing or re-rendering; local React state re-renders on every change and also drives what gets rendered, which is more than a form value should control.
• key prop for conditionally-swapped inputs: when swapping which input renders based on other form state (e.g. a checkbox toggling between two inputs), give each variant a distinct key so React treats them as different elements instead of reusing the DOM node.
• shouldUnregister: defaults to false, meaning inputs that unmount (modal/tab forms) keep their values registered instead of being wiped — the recommended fix for modal/tab forms is a separate form per modal/tab rather than relying on values surviving unmount.

Anti-patterns

• Setting value on a registered input: breaks the uncontrolled model; use defaultValue for the initial value and let RHF own updates.
• Expecting state to persist across mount/unmount of a modal or tab's inputs without shouldUnregister: false or a redesign: RHF stores state per input, not per "logical" field that outlives unmounting; the documented fix is either shouldUnregister: false (default) or capturing submission data into local/global state per step.
• Using React Hook Form directly inside a class component: not supported out of the box — hooks require a function component; wrap it if you must bridge into a class tree.

Key Takeaways

1. If a validation error appears against a select/checkbox that swaps with another field, add a key prop rather than debugging RHF.
2. getValues() is the cheap, non-reactive read; watch() is the reactive, re-rendering read — pick based on whether you need a render.
3. RHF's main structural difference from Formik/Redux Form is the uncontrolled-by-default model plus a hooks-only API (no required wrapper components).

Connects To

• useform-watch: full API for the reactive read.
• useform-getvalues: full API for the non-reactive read.
• advanced-usage: modal/tab form patterns and Controller-based mixed controlled/uncontrolled forms.