Build forms that don't make you cry

Forms in React can be tricky. As the number of input fields increases, you add third-party components, and then you need validation on top of that, things quickly become a state management nightmare.

React Hook Form is an elegant solution for managing forms in React. It provides a useForm hook that handles form state, field validation, error states, and much more. React Hook Form embraces uncontrolled inputs, minimizes unnecessary renders, and comes packed with features.

What we’ll build

We’ll create a reusable form abstraction on top of React Hook Form. This includes:

A custom useForm hook that wraps React Hook Form’s useForm hook
A <Form /> component for form structure
A reusable <Input /> component that displays validation errors
A <FieldError /> component for error messages

This abstraction will make forms simple to use while keeping them type-safe and performant.

Dependencies

We’ll need a handful of dependencies for this project:

React (with TypeScript)
react-hook-form
@hookform/resolvers (helper library to resolve Zod schemas)
zod (validation library)

About Zod

Zod is a TypeScript-first schema validation library with static type inference. You can declare a schema that defines the shape of the object you want to validate against.

For example, a person object schema can be defined as follows:

1
import { z } from 'zod'
2

3
const personSchema = z.object({
4
  // field, its type and custom constraint with validation messages
5
  firstName: z.string().min(1, 'First Name must be at least 1 character long.'),
6
})

Install dependencies

Start by creating a fresh React project with TypeScript using Create React App or Vite (recommended).

Run the following command to install the dependencies:

yarn add react-hook-form zod @hookform/resolvers

Or with npm:

npm install react-hook-form zod @hookform/resolvers

Creating our custom `useForm` hook

Create a file form.tsx in your components folder.

1
// Function to resolve Zod schema we provide
2
import { zodResolver } from '@hookform/resolvers/zod'
3

4
// We'll fully type the `<Form />` component by providing component props
5
import { ComponentProps } from 'react'
6

7
import {
8
  // We import useForm hook as useHookForm
9
  useForm as useHookForm,
10
  // TypeScript types of useHookForm props
11
  UseFormProps as UseHookFormProps,
12
  // Context provider for our form
13
  FormProvider,
14
  // Return type of useHookForm hook
15
  UseFormReturn,
16
  // TypeScript type of form's field values
17
  FieldValues,
18
  // Type of submit handler event
19
  SubmitHandler,
20
  // Hook that returns errors in current instance of form
21
  useFormContext,
22
} from 'react-hook-form'
23

24
// Type of Zod schema
25
import { ZodSchema, z } from 'zod'
26

27
// We provide an additional option that will be our Zod schema
28
interface UseFormProps<T extends ZodSchema<any>>
29
  extends UseHookFormProps<z.infer<T>> {
30
  schema: T
31
}
32

33
export const useForm = <T extends ZodSchema<any>>({
34
  schema,
35
  ...formConfig
36
}: UseFormProps<T>) => {
37
  return useHookForm({
38
    ...formConfig,
39
    resolver: zodResolver(schema),
40
  })
41
}

There’s a lot happening here. We created an interface for the useForm props. The props extend the existing React Hook Form props, but with an additional difference: we provide a Zod schema to it as well.

This ensures the returned values from the useForm hook are correctly typed according to the Zod schema. We’ll see how to use it in a moment.

Creating the `<Form />` component

Now that we’ve created the useForm hook, let’s create a <Form /> component that uses the values returned from useForm:

1
// We omit the native `onSubmit` event in favor of `SubmitHandler` event
2
// The beauty of this is that the values returned by the submit handler are fully typed
3
interface FormProps<T extends FieldValues = any>
4
  extends Omit<ComponentProps<'form'>, 'onSubmit'> {
5
  form: UseFormReturn<T>
6
  onSubmit: SubmitHandler<T>
7
}
8

9
export const Form = <T extends FieldValues>({
10
  form,
11
  onSubmit,
12
  children,
13
  ...props
14
}: FormProps<T>) => {
15
  return (
16
    <FormProvider {...form}>
17
      {/* The `form` passed here is the return value of useForm() hook */}
18
      <form onSubmit={form.handleSubmit(onSubmit)} {...props}>
19
        <fieldset
20
          // We disable form inputs when we are submitting the form
21
          // A tiny detail that is missed a lot of times
22
          disabled={form.formState.isSubmitting}>
23
          {children}
24
        </fieldset>
25
      </form>
26
    </FormProvider>
27
  )
28
}

Creating the error component

We’ll create a component to display field errors. This will render a small <span /> next to the respective <Input /> field:

1
export function FieldError({ name }: { name?: string }) {
2
  // The useFormContext hook returns the current state of the form
3
  const {
4
    formState: { errors },
5
  } = useFormContext()
6

7
  if (!name) return null
8

9
  const error = errors[name]
10

11
  if (!error) return null
12

13
  return <span>{error.message as string}</span>
14
}

Creating the reusable Input component

Now that we have our form hook, form component, and error component, we need a reusable input field.

Create a file named input.tsx with the following snippet:

1
import { ComponentProps, forwardRef } from 'react'
2
import { FieldError } from './form'
3

4
interface InputProps extends ComponentProps<'input'> {
5
  label: string
6
}
7

8
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
9
  { label, type = 'text', ...props },
10
  ref,
11
) {
12
  return (
13
    <div>
14
      <label>{label}</label>
15
      <input type={type} ref={ref} {...props} />
16
      <FieldError name={props.name} />
17
    </div>
18
  )
19
})

We use forwardRef here. Using forwardRef in React gives the child component a reference to a DOM element created by its parent component. This allows the child to read and modify that element anywhere it is being used.

How to use

Suppose you have a signup form with four fields: first name, username, email, and password. Pretty standard stuff, right? Let’s see how this abstraction makes our work easy:

1
// Make sure to import it properly
2
import { Form, useForm } from '../form/form'
3
import { z } from 'zod'
4

5
// Let's declare our validation and shape of form
6
// Zod takes care of email validation, and it also supports custom regex
7
const signUpFormSchema = z.object({
8
  firstName: z.string().min(1, 'First Name must be at least 1 character long!'),
9
  username: z
10
    .string()
11
    .min(1, 'Username must be at least 1 character long!')
12
    .max(10, 'Consider using a shorter username.'),
13
  email: z.string().email('Please enter a valid email address.'),
14
  password: z
15
    .string()
16
    .min(6, 'Please choose a longer password')
17
    .max(256, 'Consider using a shorter password'),
18
  // Add your fancy password requirements here
19
})
20

21
export function SignUpForm() {
22
  const form = useForm({
23
    schema: signUpFormSchema,
24
  })
25

26
  return (
27
    <Form
28
      form={form}
29
      onSubmit={(values) => {
30
        console.log('Form submitted with:', values)
31
        // Handle form submission
32
      }}>
33
      <Input
34
        label="Your first name"
35
        type="text"
36
        placeholder="John"
37
        {...form.register('firstName')}
38
      />
39

40
      <Input
41
        label="Choose username"
42
        type="text"
43
        placeholder="im_john_doe"
44
        {...form.register('username')}
45
      />
46

47
      <Input
48
        label="Email Address"
49
        type="email"
50
        placeholder="you@example.com"
51
        {...form.register('email')}
52
      />
53

54
      <Input
55
        label="Password"
56
        type="password"
57
        placeholder="Your password (min 6)"
58
        {...form.register('password')}
59
      />
60

61
      <button type="submit">Submit</button>
62
    </Form>
63
  )
64
}

Note that we haven’t written a single if-else statement, any useRef or useState for that matter to track error state, validation state, or form state.

I kept it free of any styling so we can focus on what matters.

Using this pattern means fewer unnecessary re-renders of components, better performance, and a cleaner codebase.

Try it out

You can try this pattern on StackBlitz.

Benefits

We’ve seen how easy it is to abstract away form logic to make it simple to use while keeping it as safe as possible. Here are the key benefits:

Type safety: Full TypeScript support with inferred types from Zod schemas
Performance: Minimal re-renders thanks to uncontrolled inputs
Validation: Schema-based validation with clear error messages
Reusability: Components can be used across different forms
Developer experience: Less boilerplate, more productivity

Conclusion

React Hook Form combined with Zod provides a powerful, type-safe way to handle forms in React. By creating a small abstraction layer, we can make forms even easier to work with while maintaining all the benefits of these libraries.

If you already use React Hook Form, I’d love to hear about any specific patterns you follow. Feel free to reach out!

Follow me on X for more updates.