react-hook-form

React Hook Form Best Practices

Comprehensive performance optimization guide for React Hook Form applications. Contains 41 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 - Use onSubmit mode for optimal performance
• formcfg-revalidate-mode - Set reValidateMode to onBlur for post-submit performance
• formcfg-default-values - Always provide defaultValues for form initialization
• formcfg-async-default-values - Use async defaultValues for server data
• formcfg-should-unregister - Enable shouldUnregister for dynamic form memory efficiency
• 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