react-hook-form

React Hook Form Best Practices by Community

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 / subscribe
• Integrating controlled UI components (MUI, shadcn, Ant Design)
• Managing dynamic field arrays with useFieldArray
• Handling async submit, server errors, and submit lifecycle state
• Reviewing forms for performance issues

When NOT to Use This Skill

• React 19 Server Actions / useActionState — use the react-19 skill instead
• Deeply nested, fully type-safe forms — TanStack Form may be a better fit for forms with complex nested schemas; this skill assumes you've already chosen RHF
• Single-input or trivial forms — uncontrolled <form> + FormData is often simpler than pulling in any library

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 - Consider reValidateMode for expensive validation
• 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
• formcfg-disabled-prop - Understand that register's disabled prop clears the value