React Hook Form + Zod: Performance-First Forms

1. Why Controlled Inputs Are Slow

A controlled input in React keeps its value in state and updates it on every change. That sounds harmless, but it means every single keystroke triggers a state update, re-renders the entire form component tree, and re-runs all validation logic. For simple forms with a few fields, this is not a problem. For complex forms with dozens of fields, nested components, and expensive validation logic, this adds up to measurable performance losses and noticeable input lag.

The underlying problem: React is optimized for immutable data propagation, not for high-frequency mutations like keyboard input. React Hook Form sidesteps this by keeping form state outside of React state and registering inputs as uncontrolled. React only re-renders the form component when explicitly necessary, for example when error messages update or a submit is triggered. The input itself never touches React; it is read directly from the DOM.

2. React Hook Form: Uncontrolled Inputs and Subscriptions

React Hook Form works with a ref-based approach: register returns refs and event handlers that are attached directly to native input elements. This means the value of an input lives in the DOM element, not in React state. React Hook Form reads the value on submit and for validation, without triggering re-renders in between. React Hook Form's subscription system is granular: individual fields can subscribe to changes without the entire tree re-rendering.

The three most important objects returned by useForm are register, handleSubmit, and formState. register connects a field to React Hook Form. handleSubmit wraps the submit function, validates all fields, and calls the callback function only with valid data. formState contains errors, isSubmitting, isDirty, isValid, and other states. Important: formState is implemented via proxies, so only the fields that are destructured trigger re-renders. Anyone who only needs errors and does not destructure isValid only re-renders for errors when validation changes.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// Define Zod schema: single source of truth for validation AND types
const loginSchema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'At least 8 characters required'),
  rememberMe: z.boolean().default(false),
});

// Infer TypeScript type from Zod schema, no duplication
type LoginFormData = z.infer<typeof loginSchema>;

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting }, // only destructure what you need
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: '', password: '', rememberMe: false },
    mode: 'onBlur', // validate on blur, not on every keystroke
  });

  const onSubmit = async (data: LoginFormData) => {
    // data is fully typed, TypeScript knows all fields
    await submitLogin(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input {...register('email')} type="email" placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}
      <input {...register('password')} type="password" />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit" disabled={isSubmitting}>Log in</button>
    </form>
  );
}

3. Zod Schemas: Type Safety from Schema to Component

Zod is a TypeScript-first schema validation library where the schema defines the types at the same time. Instead of writing types separately and then duplicating validation logic, a Zod schema is defined once and the TypeScript type is derived from it via z.infer<typeof schema>. This prevents the common situation where type and validation drift apart, for example when a new field is added to the schema but the manually defined type is forgotten.

Zod supports nested objects, arrays, unions, discriminated unions, and custom refinements. With z.discriminatedUnion, complex forms can be modeled where different fields are validated depending on the selected type, for example a form with several payment methods. z.transform converts the input value, useful for turning a date string into a Date object or trimming whitespace. z.superRefine allows complex cross-field validations with multiple error messages, for example when a password and its confirmation do not match.

4. zodResolver: Connecting Schema and useForm

The zodResolver from the @hookform/resolvers/zod package is the link between React Hook Form and Zod. It takes a Zod schema and returns a resolver function that React Hook Form calls during validation. The resolver runs the schema against the current form values and returns either the validated data or a structured error list. React Hook Form maps these errors to the corresponding fields and makes them available in formState.errors.

The validation timing is controlled by the mode option of useForm: onChange validates on every input (maximum immediate feedback, but many re-renders), onBlur validates when the field is left (a good compromise), onSubmit validates only on submission (minimally invasive), onTouched validates on first blur and on every change after that (progressive). For most forms, onBlur is the best compromise between user experience and performance. Once a field shows an error, React Hook Form automatically switches to onChange validation for that field until the error is resolved.

5. Controller for UI Library Components

Native HTML inputs can be connected directly with register. Custom components, such as a select from a UI library, a date picker, or a rich text editor, cannot directly receive a DOM ref. For these cases, React Hook Form provides the Controller component and the useController hook. Controller takes over the connection between React Hook Form and the custom component: it registers the field, subscribes to value changes, and passes field (value, onChange, onBlur, name, ref) and fieldState (error, isDirty, isTouched) to the render function.

The field object from Controller is designed so it can be mapped directly onto the props of most UI library components. A custom select component receives value and onChange, exactly what field provides. The useController hook offers the same functionality for custom hooks that wrap their own input components. Important: Controller causes more re-renders than register because it has to keep the value in React state so the custom component can be rendered in a controlled way. register is always the first choice for native inputs.

import { useForm, Controller, useFieldArray } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import Select from 'some-ui-library'; // custom component, cannot use register

const orderSchema = z.object({
  customer: z.string().min(1, 'Name required'),
  priority: z.enum(['low', 'medium', 'high']),
  items: z.array(z.object({
    product: z.string().min(1, 'Product required'),
    quantity: z.number().int().positive('Must be > 0'),
  })).min(1, 'At least one item'),
});

type OrderForm = z.infer<typeof orderSchema>;

function OrderForm() {
  const { register, control, handleSubmit, formState: { errors } } =
    useForm<OrderForm>({ resolver: zodResolver(orderSchema) });

  // useFieldArray for dynamic list of items
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register('customer')} />
      {errors.customer && <p>{errors.customer.message}</p>}

      {/* Controller for custom Select component */}
      <Controller
        name="priority"
        control={control}
        render={({ field }) => (
          <Select {...field} options={['low', 'medium', 'high']} />
        )}
      />

      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.product`)} />
          <input {...register(`items.${index}.quantity`, { valueAsNumber: true })} type="number" />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ product: '', quantity: 1 })}>Add</button>
      <button type="submit">Submit</button>
    </form>
  );
}

6. useFieldArray: Dynamic Fields Without Boilerplate

useFieldArray manages dynamic lists of fields, for example a list of order line items, upload fields, or address entries. It provides methods for adding (append, prepend), removing (remove), moving (move, swap), inserting (insert), and replacing (update). The critical detail: every entry in fields has a stable id that must be used as the key for the React iteration, not the array index. Only that way does the DOM mapping stay stable after a remove and React re-renders the correct element.

The performance characteristics of useFieldArray differ from controlled state: since React Hook Form works uncontrolled, adding or removing a field does not trigger a full re-render of all other fields, only the directly affected fields update. This makes useFieldArray considerably more performant than a self-built array state solution, especially for long lists. Validation works both at the array level (errors.items) and at the element level (errors.items?.[0]?.product).

7. Integrating Server Errors into the Form

After submitting a form, you often get errors back from the server, for example because an email is already taken or a validation error is discovered server-side that cannot be checked on the client. React Hook Form provides setError for this: a method that manually adds errors to individual fields or to the whole form. These errors appear in formState.errors exactly like schema validation errors and are rendered in the same place in the UI, no separate server-error state needed.

The pattern for server-error integration: the API is called in the onSubmit function. If it fails, the errors are parsed from the API response and set on the corresponding fields with setError. For global errors that cannot be tied to a field, setError('root') or setError('root.serverError') is used. The shouldFocusError parameter of setError automatically focuses the erroneous field, important for accessibility. With clearErrors, errors can be removed programmatically after a correction.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const registrationSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
  confirmPassword: z.string(),
}).refine(data => data.password === data.confirmPassword, {
  message: 'Passwords do not match',
  path: ['confirmPassword'], // attach error to confirmPassword field
});

type RegistrationData = z.infer<typeof registrationSchema>;

function RegistrationForm() {
  const { register, handleSubmit, setError, formState: { errors, isSubmitting } } =
    useForm<RegistrationData>({ resolver: zodResolver(registrationSchema) });

  const onSubmit = async (data: RegistrationData) => {
    try {
      await registerUser(data);
    } catch (error) {
      // Map server validation errors back to form fields
      if (error.code === 'EMAIL_TAKEN') {
        setError('email', {
          type: 'server',
          message: 'This email address is already registered.',
        });
      } else {
        // Global error not tied to a specific field
        setError('root.serverError', {
          type: 'server',
          message: 'Registration failed. Please try again later.',
        });
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {errors.root?.serverError && <div role="alert">{errors.root.serverError.message}</div>}
      <input {...register('email')} type="email" />
      {errors.email && <span>{errors.email.message}</span>}
      <input {...register('password')} type="password" />
      <input {...register('confirmPassword')} type="password" />
      {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
      <button type="submit" disabled={isSubmitting}>Register</button>
    </form>
  );
}

8. Common Mistakes with React Hook Form

The most common mistake: destructuring too many fields from formState. Anyone who writes const { formState } = useForm() and then uses formState.isValid, formState.isDirty, formState.isSubmitting, and formState.errors individually activates all four subscriptions at once. Every change to any of these states then triggers a re-render of the form component. That is rarely desired. The recommendation: only destructure the fields actually used in the UI, const { errors, isSubmitting } = formState.

A second common mistake: number inputs without valueAsNumber: true. HTML inputs always return strings, even when type="number" is set. If the Zod schema defines a z.number() field, register('quantity', { valueAsNumber: true }) must be used so React Hook Form passes the value along as a number. Without this option, Zod validation fails because a string arrives instead of a number. Alternatively, Zod can handle the conversion with z.coerce.number().

9. React Hook Form vs. Formik Compared

Formik was the standard form solution in React for years and is controlled, every keystroke triggers a state update. React Hook Form takes a different approach: uncontrolled, ref-based, minimal re-renders. A direct comparison reveals clear differences in performance, bundle size, and API complexity.

The choice between Formik and React Hook Form is rarely technically forced, both solve the problem. The advantage of React Hook Form shows up most clearly with forms that have many fields, frequent value changes, and performance-budget requirements. Formik has a slightly gentler learning curve for simple forms. Anyone starting fresh and using TypeScript is well served by React Hook Form + Zod: the type system works consistently from the schema all the way to the submit function.

10. Summary

The combination of React Hook Form and Zod delivers a form solution that is strong across three dimensions simultaneously: performance through uncontrolled inputs with minimal re-renders, type safety through z.infer as the single source of truth, and developer productivity through declarative schemas instead of imperative validation logic. The zodResolver connects both libraries seamlessly. useFieldArray solves dynamic lists without boilerplate. setError integrates server errors natively into the form state system.

The most important best practices at a glance: only destructure the fields you need from formState to avoid unnecessary subscriptions. Use valueAsNumber for number inputs, or z.coerce.number() in the schema. Use field.id instead of the array index as the key for useFieldArray. Use Controller only for custom components, always use register for native inputs. Use the onBlur validation mode as the default, with an automatic switch to onChange after the first error.

11. FAQ: React Hook Form and Zod