React Hook Form

Performant form handling for React

Language / Topic

TypeScript

Rules

React Hook Form · balanced balanced

- Use `useForm<FormValues>()` with a schema resolver for type-safe, schema-validated forms.

- Use `register()` for uncontrolled inputs, `Controller` for controlled components (Select, DatePicker).

- Use `useFormContext<FormData>()` in nested components with `FormProvider` — maintains full TypeScript types without prop drilling.

- Use `handleSubmit` wrapper — it validates before calling your submit handler.

- Use `formState.errors` for field-level error display. Show errors next to the relevant input.

- Use `watch()` sparingly — prefer `useWatch()` for isolated re-renders on specific fields.

- Use `defaultValues` to initialize forms. Use `reset()` to clear forms after successful submission.