react-hook-form

React Hook Form Best Practices

Comprehensive performance optimization guide for React Hook Form applications. Contains 45 rules across 8 categories, prioritized by impact to guide form development, automated refactoring, and code generation.

When to Apply

Reference these guidelines when:

• Writing new forms with React Hook Form
• Configuring useForm options (mode, defaultValues, validation)
• Subscribing to form values with watch/useWatch
• Integrating controlled UI components (MUI, shadcn, Ant Design)
• Managing dynamic field arrays with useFieldArray
• Reviewing forms for performance issues

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Form Configuration	CRITICAL	formcfg-
2	Field Subscription	CRITICAL	sub-
3	Controlled Components	HIGH	ctrl-
4	Validation Patterns	HIGH	valid-
5	Field Arrays	MEDIUM-HIGH	array-
6	State Management	MEDIUM	formstate-
7	Integration Patterns	MEDIUM	integ-
8	Advanced Patterns	LOW	adv-

Quick Reference

1. Form Configuration (CRITICAL)

• formcfg-validation-mode - Choose validation mode from UX and validation cost
• formcfg-revalidate-mode - Choose post-submit revalidation deliberately
• formcfg-default-values - Always provide defaultValues for form initialization
• formcfg-async-default-values - Use async defaultValues for server data
• formcfg-should-unregister - Choose shouldUnregister from submission semantics
• formcfg-useeffect-dependency - Avoid useForm return object in useEffect dependencies

2. Field Subscription (CRITICAL)

• sub-usewatch-over-watch - Use useWatch instead of watch for isolated re-renders
• sub-watch-specific-fields - Watch specific fields instead of entire form
• sub-usewatch-with-getvalues - Combine useWatch with getValues for timing safety
• sub-deep-subscription - Subscribe deep in component tree where data is needed
• sub-avoid-watch-in-render - Avoid calling watch() in render for one-time reads
• sub-usewatch-default-value - Provide defaultValue to useWatch for initial render
• sub-useformcontext-sparingly - Use useFormContext sparingly for deep nesting

3. Controlled Components (HIGH)

• ctrl-usecontroller-isolation - Use useController for re-render isolation
• ctrl-avoid-double-registration - Avoid double registration with useController
• ctrl-controller-field-props - Wire Controller field props correctly for UI libraries
• ctrl-single-usecontroller-per-component - Split controlled fields when isolation helps
• ctrl-local-state-combination - Combine local state with useController for UI-only state

4. Validation Patterns (HIGH)

• valid-resolver-caching - Define schema outside component for resolver caching
• valid-dynamic-schema-factory - Use schema factory for dynamic validation
• valid-error-message-strategy - Render field errors with ErrorMessage (7.88+) or optional chaining
• valid-trigger-should-touch - Mark fields touched when triggering validation (7.87+)
• valid-inline-vs-resolver - Prefer resolver over inline validation for complex rules
• valid-delay-error - Use delayError to debounce rapid error display
• valid-native-validation - Consider native validation for simple forms
• valid-form-level-validate - Validate cross-fields with the form-level validate option (7.72+)

5. Field Arrays (MEDIUM-HIGH)

• array-use-field-id-as-key - Use field.id as key in useFieldArray maps
• array-complete-default-objects - Provide complete default objects for field array operations
• array-separate-crud-operations - Separate sequential field array operations
• array-unique-fieldarray-per-name - Use single useFieldArray instance per field name
• array-virtualization-formprovider - Use FormProvider for virtualized field arrays

6. State Management (MEDIUM)

• formstate-destructure-formstate - Destructure formState properties before render
• formstate-useformstate-isolation - Use useFormState for isolated state subscriptions
• formstate-getfieldstate-for-single-field - Use getFieldState and getErrors for single-field reads
• formstate-subscribe-to-specific-fields - Subscribe to specific field names in useFormState
• formstate-avoid-isvalid-with-onsubmit - Align submit gating with validation mode

7. Integration Patterns (MEDIUM)

• integ-shadcn-form-import - Verify shadcn Form component import source
• integ-shadcn-select-wiring - Wire shadcn Select with onValueChange instead of spread
• integ-mui-controller-pattern - Use Controller for Material-UI components
• integ-value-transform - Transform values at Controller level for type coercion
• integ-typed-submit-server-action - Submit with a typed handleSubmit result or Server Action (7.84+)

8. Advanced Patterns (LOW)

• adv-formprovider-memo - Memoize FormProvider children only after profiling
• adv-devtools-performance - Disable DevTools in production and during performance testing
• adv-testing-wrapper - Create test wrapper with QueryClient and AuthProvider
• adv-opaque-types - Register value classes in OpaqueTypes (7.87+)

How to Use

Run in the project root first:

npx -y @pymodel/react-frontend-skills detect                        # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill react-hook-form  # deprecated APIs → rule IDs

Read references/<rule-id>.md for each rule above that matches the task and for each scan hit: why it matters, then incorrect vs. correct code.

Related Skills

• For schema validation with Zod resolver, see zod skill
• For React 19 server actions, see react skill
• For UI/UX form design, see ui-design skill