skills.rest
pnewsam
pnewsamCOMMUNITY
Explore all skills by this author →
Website𝕏@paultakumaGitHub

react-form-patterns

Structure React forms using form contexts and reusable field components.

1|Updated Apr 15, 2026
Search Tags:#frontend#react#forms#react hook form#form validation#tanstack form#field components
One-click install
npx skills add https://github.com/pnewsam/skills --skill react-form-patterns-pnewsam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-form-patterns
Source: https://github.com/pnewsam/skills/tree/main/archive/react-pilot/react-form-patterns
Command: npx skills add https://github.com/pnewsam/skills --skill react-form-patterns-pnewsam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building non-trivial React forms often leads to tangled JSX where form logic, validation, and UI are mixed together, making forms hard to maintain and inconsistent across an application. This Skill defines a clear architectural pattern that separates form configuration from form UI. ## Core Features & Use Cases - Form Context Pattern: Create a per-form context that configures the form library (React Hook Form, TanStack Form, or Formik), defining schema, validation, defaults, and submit handling in one place. - Reusable Field Components: Build generic, library-aware field components (InputField, TextareaField, SelectField) that read form state from context and handle labels, errors, and accessibility consistently. - Advanced Scenarios: Covers multi-step wizard forms, dynamic field arrays, dirty tracking with unsaved-changes warnings, and scoped subscriptions via useWatch. - Use Case: When adding a Create Invoice form to a React app, define a CreateInvoiceFormContext with a Zod schema, then compose the form declaratively from shared field components without duplicating validation or error-display logic. ## Quick Start Use the react-form-patterns skill to build a new form with a form context and reusable field components in my React project.

Frequently Asked Questions about react-form-patterns

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

FAQPage Schema
How do I structure forms in React with reusable field components?▼

Create a form context per form that configures the form library with schema and validation, then build generic field components like InputField that read form state via context. Compose forms declaratively by placing field components inside the context provider.

React Hook Form vs TanStack Form vs Formik for form contexts?▼

All three support the context pattern: React Hook Form uses FormProvider and useFormContext, TanStack Form passes formApi via context, and Formik uses the Formik wrapper with useFormikContext. Match whichever library the project already uses rather than introducing a new one.

When should I use a form library instead of React 19 form actions?▼

React 19 form actions with useActionState and useOptimistic work well for simple or server-driven forms. Reach for a form library when you need client-side schema validation, dynamic field arrays, dirty tracking, or fine-grained error UX.

Why does my React Hook Form component re-render on every keystroke?▼

Calling watch() subscribes the whole component to all form changes, causing re-renders on every update. Use useWatch({ name }) instead to subscribe to a single field and isolate re-renders to only the components that need that value.

How do I handle dynamic field arrays in React Hook Form?▼

Use useFieldArray with a named array field to add and remove entries like line items. For nested field names such as lineItems.0.description, use a path-aware error accessor like get(errors, name) since simple errors[name] lookups will not work.

Related Skills

Explore More Software Engineering Skills→
AratKruglikAratKruglik
9

react-forms

Implement React forms with react-hook-form, Formik, or TanStack Form.

Community
Intermediate
jacob-balslevjacob-balslev
1

nextjs-server-action-validation

Validate Next.js Server Action inputs with authentication, Zod schemas, and org-scoped authorization.

Community
Advanced
mgiffordmgifford
39

forms

Ensure form controls have programmatic labels and accessible error messages.

Community
Advanced
jacexhjacexh

react-patterns

Implement React 19 patterns with Server Actions and TanStack Query mutations.

Community
Intermediate