intermediate

React Hook Form

Use uncontrolled input registration, schema resolvers, and targeted rerenders for large forms.

React Hook Form registers uncontrolled inputs via refs, validating on demand and minimizing rerenders compared to per-keystroke controlled state for large forms. `register` connects fields; `handleSubmit` runs validation then your submit handler.

Schema resolvers (Zod, Yup) integrate for shared client-server validation. `Controller` bridges controlled third-party widgets. Watch selected fields when dependent UI is needed without making every field controlled.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

Register native inputs for performance.
Resolver for schema validation.
Controller for non-native components.