Most React form tutorials show you the happy path. A single text input, a submit button, a console.log. Real forms are messier. They have dependent fields, async checks, file uploads, and state that needs to survive accidental back-button taps. I’m Suki Watanabe, and I’ve ripped out enough form libraries in production to know which patterns hold up and which ones crumble the moment your PM adds “just one more field.”

Nail the Data Shape Before You Touch a Component

Before you even think about Formik, React Hook Form, or a hand-rolled reducer, define the exact shape of the data your API expects. Flat object? Nested structures with arrays? Write the TypeScript interface first. This one step stops you from wiring up a library that fights your data model later.

interface ProjectFormData {
  title: string;
  description: string;
  tags: string[];
  settings: {
    visibility: 'public' | 'private';
    budget: number;
  };
}

Once the shape is locked, you can pick the right tool. React Hook Form shines with uncontrolled inputs and flat-ish data. Formik handles deeply nested objects and arrays more naturally. A custom reducer gives you total control when you need to track touched, dirty, and validation states in ways the libraries don’t expose cleanly.

Controlled vs. Uncontrolled: Commit to One

Mixing controlled and uncontrolled inputs in the same form is a debugging nightmare. React’s docs warn about it, but the real-world consequence is inputs that mysteriously reset or lag by a keystroke. Pick a lane for the entire form.

Uncontrolled inputs with refs and the native FormData API work beautifully for simple forms. No re-renders on every keystroke, and the browser handles the heavy lifting. Controlled inputs give you instant access to values for dynamic field disabling, conditional sections, and inline error messages—but you pay a performance tax. Each keystroke triggers a re-render of the whole form unless you’re careful.

Keeping Controlled Forms Snappy

When you go controlled, isolate state. Wrap each logical section in its own component and memoize it with React.memo. Typing in the “title” field shouldn’t cause the “tags” section to re-render. Pass down only the slices of state and callbacks each section actually needs. It’s more wiring upfront, but your users won’t curse you when they’re filling out a 40-field form.

Validation Timing Is a UX Decision

When you validate matters as much as what you validate. Validate on blur for fields where the user needs to finish typing—email, URL, password confirmation. Validate on submit for expensive async checks like username availability. Validating on every keystroke for an async call is a recipe for hammering your API and dealing with race conditions where stale responses overwrite fresh ones.

Zod has become the go-to for schema validation because it spits out TypeScript types directly. Define your schema once, infer the type, and use the same schema on the client and server. No more drift between what your form collects and what your endpoint expects.

import { z } from 'zod';

const projectSchema = z.object({
  title: z.string().min(3, 'Title must be at least 3 characters'),
  budget: z.number().positive('Budget must be positive'),
});

type ProjectFormData = z.infer;

Async Validation Without the Spam

For username checks, debounce the validation call by 300–500ms. Wrap it in an AbortController so a new request cancels the previous one. React Hook Form’s built-in validate doesn’t handle this natively, so you’ll need a custom resolver or a wrapper that tracks the current controller. Cache recent results in a Map keyed by the input value—if the user types the same username twice, skip the second request entirely.

File Uploads Without the Boilerplate

File inputs remain clunky in React. The native <input type="file"> is uncontrolled by design—you can’t set its value programmatically. Grab a ref to access the FileList and manage preview URLs in state. For drag-and-drop, attach event handlers to a drop zone div and call preventDefault on dragover and drop.

When you need upload progress, XMLHttpRequest’s progress event still beats the Fetch API’s streaming, which has spotty browser support for upload tracking. Wrap it in a promise and update a progress state variable. It’s old-school, but it works.

Dynamic Fields and Dependent Logic

Forms that grow and shrink at runtime—team member lists, variable pricing tiers—need stable keys. Never use array indices as React keys. Generate a unique ID when each entry is created, using crypto.randomUUID() or a simple counter. This prevents state from leaking between fields when items are reordered or deleted.

Dependent fields, where selecting one option reveals or populates another, call for derived state. Compute the dependent values during render or inside a useMemo rather than storing them separately. Storing derived state leads to synchronization bugs where the primary value changes but the derived value stays stale.

Conditional Sections and Field Arrays

When a checkbox toggles an entire section, don’t unmount it. Unmounting destroys the field values, and users hate redoing work they already finished. Hide the section with CSS or conditionally render it while keeping the state alive in a parent component or context. React Hook Form’s useFieldArray handles this well for repeatable groups.

Error Handling Beyond the Red Border

Field-level errors are easy—red border, message below the input. Form-level errors from the server (“That project name is already taken”) need a dedicated spot, usually above the submit button. Network errors and unexpected exceptions require a fallback UI that doesn’t trash the user’s input. Wrap your submit handler in a try-catch. On failure, preserve the form state and show a toast or inline alert.

Retry logic matters for flaky connections. A simple approach: on network error, show a “Retry” button that resubmits the same payload. Don’t make the user fill out the form again.

Persistence: Don’t Lose Work on Route Changes

Users navigate away from forms accidentally. A browser back-button press shouldn’t wipe 20 minutes of data entry. Persist form state to sessionStorage on every change, debounced to 500ms. When the component mounts, check for saved state and offer to restore it. Clear the storage on successful submission.

For multi-step forms, this persistence is non-negotiable. Each step should save its slice independently so returning to a previous step doesn’t require re-fetching or re-entering data. Use a context provider that reads from and writes to storage, keeping the current step index in the URL.

Accessibility That Holds Up Under Load

Dynamic error messages need aria-describedby linking the input to the error element. When an error appears, move focus to the first invalid field. Use aria-live="polite" regions for form-level errors so screen readers announce them. Disabled submit buttons should communicate why they’re disabled—not just sit there grayed out. Add a visually hidden message or use aria-disabled with a tooltip.

Testing Forms Without the Headache

Unit test validation logic in isolation—export your Zod schema and test it with various payloads. Integration test the form with React Testing Library by simulating user interactions: type into fields, click checkboxes, upload files. Avoid testing implementation details like state variable names. Assert on what the user sees: error messages, enabled submit buttons, success toasts.

For async validation, mock the API and use waitFor to wait for debounced validators. If you’re using MSW (Mock Service Worker), define handlers that return specific errors to test retry and failure paths.

When to Skip the Library Entirely

For a login form with two fields, importing a 20kB library is overhead you don’t need. Use a simple <form> with uncontrolled inputs, FormData, and a fetch call. Add a useActionState hook (React 19) for server actions if you’re on the bleeding edge. The pattern is under 30 lines and has zero dependencies.

Reach for a library when you hit multiple field arrays, cross-field validation, or complex async workflows. Until then, the platform gives you enough.

FAQ

Should I use controlled or uncontrolled inputs for a large form with 50+ fields?

Uncontrolled inputs with React Hook Form’s register method will perform significantly better. Controlled inputs at that scale cause noticeable typing lag unless you aggressively memoize every field component. If you need real-time validation on all 50 fields, consider validating on blur instead of onChange to reduce re-renders.

How do I handle form state when the user navigates between steps in a wizard?

Keep the entire form state in a context provider that persists to sessionStorage. Each step component reads and writes to the same context. The current step index lives in the URL as a query parameter. When the user clicks “Back,” the previous step’s data is already in context—no refetching needed. On final submit, send the complete payload and clear storage.

What’s the best way to validate a username field asynchronously without spamming the server?

Debounce the validation call by 300-500ms and use an AbortController to cancel in-flight requests when the user types again. Trigger the validation on blur, not on every keystroke. Cache recent results in a Map keyed by the input value so that if the user types the same username twice, you skip the second request entirely.