skills.rest
kaannakiin
kaannakiinCOMMUNITY
Explore all skills by this author →
GitHub

react-hook-form

Applies 35 corrective rules for React Hook Form configuration, subscriptions, validation, and field arrays.

Updated Jul 25, 2026
Search Tags:#typescript#performance#frontend#react#form validation#react-hook-form#useform
One-click install
npx skills add https://github.com/kaannakiin/turborepo_template --skill react-hook-form-kaannakiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-hook-form
Source: https://github.com/kaannakiin/turborepo_template/tree/main/.agents/skills/react-hook-form
Command: npx skills add https://github.com/kaannakiin/turborepo_template --skill react-hook-form-kaannakiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? React Hook Form code frequently ships with subtle mistakes: forms that re-render on every keystroke, fields silently dropped from the submitted payload, stuck isSubmitting states, and resolver type errors. This Skill provides 35 verified rules that name the exact decisions a capable developer or model gets wrong by default, each with incorrect/correct code examples type-checked against react-hook-form 7.82.0. ## Core Features & Use Cases - Form Configuration Rules: Covers defaultValues, validation mode, shouldUnregister, the third useForm generic for transforming resolvers, async defaults, and the values prop for server-synced forms. - Subscription & Re-render Isolation: Guides correct use of useWatch, subscribe(), useFormState, and the Watch / FormStateSubscribe / FieldArray render-prop components to confine re-renders. - Validation, State & Field Arrays: Addresses resolver caching, valueAsNumber NaN handling, setError('root.serverError'), resetDefaultValues after save, and useFieldArray pitfalls like the silent disabled no-op. - Use Case: When building a checkout form with shadcn/ui, consult the integration rules to wire Radix Select via onValueChange and avoid importing the wrong Form component. ## Quick Start Ask the AI to review your React Hook Form component for performance and correctness issues using the react-hook-form skill rules.

Frequently Asked Questions about react-hook-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop React Hook Form from re-rendering on every keystroke?▼

Keep the default mode 'onSubmit' instead of 'onChange', and move value subscriptions out of the form root using useWatch, useFormState, or the Watch and FormStateSubscribe render-prop components in child components. Reading formState or calling watch() at the form root subscribes the whole tree to every change.

Why is my field missing from the React Hook Form submit data?▼

A field vanishes from handleSubmit values when register's disabled option is true or when shouldUnregister removes unmounted fields. Use the plain HTML disabled attribute for visual disabling, and keep shouldUnregister off unless hidden fields must leave the payload.

How do I fix the useForm resolver type error with Zod transforms?▼

Pass the third useForm generic when the schema transforms values: useForm<Input, unknown, Output> with types derived from z.input and z.output. Without it, TypeScript pins handleSubmit's values to the input type and the resolver fails to typecheck.

Does this skill cover React 19 Server Actions or useActionState?▼

No. The skill explicitly excludes React 19 Server Actions, useActionState, and server-side form handling; it targets client-side React Hook Form only. For server actions, the documentation points to a separate react-19 skill.

Why does isSubmitting stay true after my submit handler throws?▼

isSubmitting only resets when the async handler returns normally; a thrown error leaves it true and the form unrecoverable. Wrap the handler in try/catch, report failures via setError('root.serverError'), and reset the form in a useEffect gated on isSubmitSuccessful.

When should I not use React Hook Form for a form?▼

Skip it for single-input or trivial forms where an uncontrolled form element with FormData is simpler, and consider TanStack Form for deeply nested, fully type-safe forms with complex schemas. The skill assumes you have already chosen React Hook Form.

Related Skills

Explore More Software Engineering Skills→
remiconnessonremiconnesson

react-hook-form

Optimize React Hook Form usage to reduce re-renders and validation overhead.

Community
Advanced
kaxuna1kaxuna1

react-hook-form

Implement type-safe React forms with react-hook-form and TypeScript.

Community
Intermediate
aexol-studioaexol-studio
27

react-hook-form-zod

Automate React form validation and submission with Zod and react-hook-form.

Official
Intermediate
davila7davila7
30.5k

react-dev

Provides type-safe React TypeScript patterns for components, hooks, events, and routing.

Community
Intermediate