react-hook-form

React Hook Form Best Practices by Community

Comprehensive performance optimization guide for React Hook Form applications. Contains 35 rules across 7 categories, each naming a decision that goes wrong by default. Verified against react-hook-form 7.82.0.

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	State Management	MEDIUM-HIGH	formstate-
6	Field Arrays	MEDIUM-HIGH	array-
7	Integration Patterns	MEDIUM	integ-

Quick Reference

1. Form Configuration (CRITICAL)

• formcfg-default-values - Always Provide defaultValues for Form Initialization
• formcfg-useeffect-dependency - Depend on formState Slices, Not on formState Itself
• formcfg-validation-mode - Justify Any mode Other Than the Default onSubmit
• formcfg-revalidate-mode - Keep Default reValidateMode Unless Validation Is Expensive
• formcfg-should-unregister - Keep shouldUnregister Off Unless Hidden Fields Must Leave the Payload
• formcfg-transformed-values-generic - Pass the Third useForm Generic When the Resolver Transforms Values
• formcfg-async-default-values - Use Async defaultValues for Server Data
• formcfg-disabled-prop - Use the HTML disabled Attribute for Visual Disabling, Not register's disabled Option
• formcfg-values-prop - Use the values Prop to Keep a Form in Sync with Server Data