About

Imported from shipshitdev/skills (skills/react-hook-form/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill react-hook-form. Copyright stays with the author.

React Hook Form Best Practices

Name: react-hook-form
Author: shipshitdev

41 rules across 8 categories for React Hook Form, prioritized by impact to guide form development, automated refactoring, and code generation.

When to Apply

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

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 - Use single useController per component
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 - Access errors via optional chaining or lodash get
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

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 for single field state access
formstate-subscribe-to-specific-fields - Subscribe to specific field names in useFormState
formstate-avoid-isvalid-with-onsubmit - Avoid isValid with onSubmit mode for button state

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

8. Advanced Patterns (LOW)

adv-formprovider-memo - Wrap FormProvider children with React.memo
adv-devtools-performance - Disable DevTools in production and during performance testing
adv-testing-wrapper - Create test wrapper with QueryClient and AuthProvider

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
Reference files: references/{prefix}-{slug}.md

Related Skills

For schema validation with Zod resolver, see zod skill
For UI/UX form design, see frontend-design skill

Full Compiled Document

For the complete guide with all rules expanded, see ${CLAUDE_SKILL_DIR}/AGENTS.md (load when a deep rule reference is needed).

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-react-hook-form/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-react-hook-form.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-react-hook-form",
  "kind": "skill",
  "name": "react-hook-form",
  "description": "Provides 41 prioritized performance rules for React Hook Form across form configuration, field subscription, controlled components, validation, and field arrays. Invoke when writing or reviewing forms with useForm, useWatch, useController, or useFieldArray; integrating shadcn/MUI with Controller; or diagnosing unexpected re-renders in RHF-based forms. Covers client-side validation only — does not cover React Server Actions or useActionState.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "customer_support"
    ],
    "tags": [
      "skill-md",
      "react",
      "forms",
      "performance",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Provides 41 prioritized performance rules for React Hook Form across form configuration, field subscription, controlled components, validation, and field arrays. Invoke when writing or reviewing forms with useForm, useWatch, useController, or useFieldArray; integrating shadcn/MUI with Controller; or diagnosing unexpected re-renders in RHF-based forms. Covers client-side validation only — does not cover React Server Actions or useActionState."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/react-hook-form/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/react-hook-form/SKILL.md",
      "key": "shipshitdev/skills/skills/react-hook-form/SKILL.md"
    }
  },
  "instructions": "# React Hook Form Best Practices\n\n41 rules across 8 categories for React Hook Form, prioritized by impact to guide form development, automated refactoring, and code generation.\n\n## When to Apply\n\n- Writing new forms with React Hook Form\n- Configuring useForm options (mode, defaultValues, validation)\n- Subscribing to form values with watch/useWatch\n- Integrating controlled UI components (MUI, shadcn, Ant Design)\n- Managing dynamic field arrays with useFieldArray\n- Reviewing forms for performance issues\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|------",
  "cost": {
    "context_tokens": 1335
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-react-hook-form/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.