form-react_skill

Overview

This skill provides production-ready React form patterns built around React Hook Form (default) and an alternative TanStack Form stack, both integrated with Zod for schema validation. It emphasizes practical patterns—reusable fields, nested forms, arrays, async validation, and a reward-early / punish-late validation timing (onBlur with reValidate onChange). Use it to standardize form behavior, accessibility, and developer ergonomics in React apps.

How this skill works

The default implementation uses React Hook Form with zodResolver to run schema validation and manage uncontrolled inputs for high performance. It ships patterns for useForm, FormProvider, useFieldArray, useWatch, and custom field components. An alternative TanStack Form version shows controlled component patterns, built-in async validation debouncing, and cross-framework support. Validation timing defaults to onBlur (first validation) and reValidateMode: onChange for real-time correction.

When to use it

• Standard web React apps where performance and small bundle size matter (default: React Hook Form + Zod).
• When you need controlled behavior, cross-framework libraries, or React Native support (use TanStack Form).
• Forms that require async checks (username availability), with built-in debouncing (TanStack) or manual async handling (RHF).
• Multi-section or nested forms that benefit from FormProvider and context-based patterns.
• Dynamic list fields like team members or addresses using useFieldArray.

Best practices

• Prefer React Hook Form for uncontrolled inputs and best performance; pick TanStack for strict controlled patterns or cross-framework targets.
• Use Zod for typed, centralized validation schemas and pass them via resolver/validatorAdapter.
• Adopt onBlur + reValidateMode: 'onChange' to reward early correctness and allow fast correction.
• Wrap complex forms in FormProvider to share methods with nested components and keep components small.
• Handle server errors explicitly: set field errors with setError and surface general errors at the form level.

Example use cases

• Login and registration forms with client-side schema validation and async username checks.
• Checkout forms split into nested sections (contact, shipping, payment) using FormProvider.
• Admin panels with dynamic array fields (add/remove team members) via useFieldArray.
• Mobile apps or multi-framework libraries where TanStack Form’s cross-framework support is required.
• Complex linked fields (password confirmation) and real-time UI (password strength meter) using useWatch.