Why use a validation resolver like Zod?

Resolvers separate validation logic from component code, allow for shared schemas across the stack, and provide robust TypeScript type inference for form data.

Why should I use useWatch instead of watch()?

useWatch isolates re-renders to specific components, significantly improving performance in large forms compared to watch(), which triggers a re-render of the entire form root.

When do I need to use the Controller component?

Use the Controller component for UI library components or custom inputs that do not expose a native ref, ensuring they remain compatible with React Hook Form's internal state.

What is the recommended validation mode for UX?

The recommended mode is 'onBlur' or 'onTouched', as it provides feedback exactly when the user finishes interacting with a field, avoiding the noise of 'onChange' validation.

How do I handle dynamic lists in React Hook Form?

Use the useFieldArray hook and ensure you always use field.id as the React key instead of the array index to prevent state corruption during additions, removals, or reordering.

React Hook Form Patterns

Name: React Hook Form Patterns
Author: agents-inc

byagents-inc

•

デザインツール

Implements performant, type-safe React forms using React Hook Form best practices and optimized rendering patterns.

This skill provides comprehensive patterns for building complex React forms using the React Hook Form library. It guides Claude through setting up type-safe forms with TypeScript generics, handling controlled components via the Controller pattern, managing dynamic field arrays, and implementing schema-based validation with resolvers like Zod. By emphasizing performance through subscription-based updates and avoiding unnecessary re-renders, it is ideal for everything from simple contact forms to complex, multi-step wizards and enterprise-grade data entry interfaces.

主な機能

01Dynamic field management using useFieldArray with unique IDs

021 GitHub stars

03Schema-based validation via resolver integration (e.g., Zod, Yup)

04Type-safe form handling with mandatory TypeScript generics

05Advanced patterns for multi-step wizards and nested form components

06Performance-optimized rendering with useWatch and useFormState

ユースケース

01Building complex data entry forms with conditional logic and dynamic fields

02Implementing multi-step wizard forms with per-step validation

03Integrating third-party UI libraries with controlled component requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-forms-react-hook-form

For use in Claude.ai and ChatGPT

主な機能

01Dynamic field management using useFieldArray with unique IDs

021 GitHub stars

03Schema-based validation via resolver integration (e.g., Zod, Yup)

04Type-safe form handling with mandatory TypeScript generics

05Advanced patterns for multi-step wizards and nested form components

06Performance-optimized rendering with useWatch and useFormState

ユースケース

01Building complex data entry forms with conditional logic and dynamic fields

02Implementing multi-step wizard forms with per-step validation

03Integrating third-party UI libraries with controlled component requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-forms-react-hook-form

For use in Claude.ai and ChatGPT