Managing forms in React can be a challenging task, especially when it comes to validation and error handling. React Hook Form is a lightweight library that simplifies these tasks while offering excellent performance. In this post, we’ll start by discussing a common problem you might face without any specialized library. Then, we’ll explore how React Hook Form can streamline form handling, and finally, we’ll introduce the Zod library to enhance validation.

1. The Problem: Vanilla Form Handling in React

Imagine you’re building a simple registration form with fields for username and email. Without any libraries, you might end up writing a lot of code to manage state, handle validations, and display error messages. For example:

import { useState } from 'react';

const RegistrationForm = () => {

const [username, setUsername] = useState('');

const [email, setEmail] = useState('');

const [errors, setErrors] = useState({});

const validate = () => {

const newErrors = {};

if (!username.trim()) newErrors.username = 'Username is required';

if (!email.trim()) {

newErrors.email = 'Email is required';

} else if (!/^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/.test(email)) {

newErrors.email = 'Email is not valid';

}

return newErrors;

};

const handleSubmit = (e) => {

e.preventDefault();

const validationErrors = validate();

if (Object.keys(validationErrors).length > 0) {

setErrors(validationErrors);

return;

}

// Proceed with form submission

console.log('Form submitted', { username, email });

};

return (

<div>

<label htmlFor="username" className="block mb-1 font-semibold">Username:</label>

<input

id="username"

value={username}

onChange={(e) => setUsername(e.target.value)}

className="w-full p-2 border rounded"

/>

{errors.username && <p className="mt-1 text-red-500 text-sm">{errors.username}</p>}

</div>

<div>

<label htmlFor="email" className="block mb-1 font-semibold">Email:</label>

<input

id="email"

value={email}

onChange={(e) => setEmail(e.target.value)}

className="w-full p-2 border rounded"

/>

{errors.email && <p className="mt-1 text-red-500 text-sm">{errors.email}</p>}

</div>

<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>

</form>

);

};

export default RegistrationForm;

Issues with this approach:

State Management: You need to manually manage state for every input.
Validation Logic: Validation is written imperatively and may grow complex as forms become larger.
Error Handling: You must explicitly manage error state and display error messages for each field.
Boilerplate Code: There’s a lot of repetitive code for handling inputs and errors.

2. Introducing React Hook Form

React Hook Form is a lightweight library that leverages React Hooks to manage form state and validation with minimal re-renders and boilerplate code.

Key Functions in React Hook Form

register: Connects input elements to the form state and allows you to specify validation rules.
handleSubmit: A function wrapper that handles the form submission event, automatically managing validation.
formState: An object that provides information about the current state of the form, including any validation errors.

Setting Up React Hook Form

To get started, install React Hook Form in your project:

npm install react-hook-form

Basic Form Example

Let’s see how the same registration form can be rewritten using React Hook Form:

import { useForm } from 'react-hook-form';

const HookFormRegistration = () => {

const {

register,

handleSubmit,

formState: { errors },

} = useForm();

const onSubmit = (data) => {

console.log('Form Data:', data);

};

return (

<div>

<label htmlFor="username" className="block mb-1 font-semibold">Username:</label>

<input

id="username"

{...register('username', { required: 'Username is required' })}

className="w-full p-2 border rounded"

/>

{errors.username && <p className="mt-1 text-red-500 text-sm">{errors.username.message}</p>}

</div>

<div>

<label htmlFor="email" className="block mb-1 font-semibold">Email:</label>

<input

id="email"

type="email"

{...register('email', {

required: 'Email is required',

pattern: {

value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,

message: 'Email is not valid',

},

})}

className="w-full p-2 border rounded"

/>

{errors.email && <p className="mt-1 text-red-500 text-sm">{errors.email.message}</p>}

</div>

<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>

</form>

);

};

export default HookFormRegistration;

Explanation:

register: This function connects each input field to the form’s state and validation.
handleSubmit: This function handles the form submission.
errors: An object containing validation errors for each input field. In this example, error messages are displayed right under the inputs.

Benefits of Using React Hook Form:

Less Boilerplate: No need to create separate state variables and validation functions.
Declarative Validation: Validation rules are declared directly in the register method.
Automatic Error Handling: Errors are automatically managed and accessible via the errors object.
Performance: Minimizes unnecessary re-renders by leveraging uncontrolled components.

3. Introducing the Zod Library for Schema Validation

While React Hook Form provides basic validation capabilities, you might want to enforce more complex rules or centralize your validation logic. This is where the Zod library comes in.

What Is Zod?

Zod is a TypeScript-first schema declaration and validation library—but it works perfectly well with plain JavaScript. It allows you to define a schema for your form data and automatically validate input against that schema. Zod can provide default error messages and also allows customization.

Documentation and Resources

Official Website: https://zod.dev/
GitHub Repository: https://github.com/colinhacks/zod

Using Zod with React Hook Form

To integrate Zod with React Hook Form, you need the @hookform/resolvers package:

npm install @hookform/resolvers zod

Example 1: Using Zod with Default Error Messages

Let’s define a simple schema and integrate it into our form:

import { useForm } from 'react-hook-form';

import { z } from 'zod';

import { zodResolver } from '@hookform/resolvers/zod';

// Define the Zod schema

const formSchema = z.object({

username: z.string(),

email: z.string().email(),

});

const ZodDefaultForm = () => {

const {

register,

handleSubmit,

formState: { errors },

} = useForm({

resolver: zodResolver(formSchema),

});

const onSubmit = (data) => {

console.log('Form Data:', data);

};

return (

<div>

<label htmlFor="username" className="block mb-1 font-semibold">Username:</label>

<input

id="username"

{...register('username')}

className="w-full p-2 border rounded"

/>

{errors.username && <p className="mt-1 text-red-500 text-sm">{errors.username.message}</p>}

</div>

<div>

<label htmlFor="email" className="block mb-1 font-semibold">Email:</label>

<input

id="email"

type="email"

{...register('email')}

className="w-full p-2 border rounded"

/>

{errors.email && <p className="mt-1 text-red-500 text-sm">{errors.email.message}</p>}

</div>

<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>

</form>

);

};

export default ZodDefaultForm;

Example 2: Customizing Error Messages with Zod

You can further customize error messages by refining your schema definitions. For instance:

import { useForm } from 'react-hook-form';

import { z } from 'zod';

import { zodResolver } from '@hookform/resolvers/zod';

// Define a schema with custom error messages

const customFormSchema = z.object({

username: z

.string()

.nonempty({ message: 'Please enter your username' }),

email: z

.string()

.nonempty({ message: 'Email cannot be empty' })

.email({ message: 'Please provide a valid email address' }),

});

const ZodCustomForm = () => {

const {

register,

handleSubmit,

formState: { errors },

} = useForm({

resolver: zodResolver(customFormSchema),

});

const onSubmit = (data) => {

console.log('Form Data:', data);

};

return (

<div>

<label htmlFor="username" className="block mb-1 font-semibold">Username:</label>

<input

id="username"

{...register('username')}

className="w-full p-2 border rounded"

/>

{errors.username && <p className="mt-1 text-red-500 text-sm">{errors.username.message}</p>}

</div>

<div>

<label htmlFor="email" className="block mb-1 font-semibold">Email:</label>

<input

id="email"

type="email"

{...register('email')}

className="w-full p-2 border rounded"

/>

{errors.email && <p className="mt-1 text-red-500 text-sm">{errors.email.message}</p>}

</div>

<button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>

</form>

);

};

export default ZodCustomForm;

Key Points:

Zod Schema: The schema is defined with custom messages inside the nonempty and email methods.
zodResolver: This function connects the Zod schema to React Hook Form, ensuring that validation errors (customized or default) are available in the errors object.
Error Display: As in previous examples, error messages are shown right under each input.

4. Conclusion

By using React Hook Form, you can dramatically reduce the boilerplate and complexity of managing forms in React. It simplifies state management and validation, and when paired with the Zod library, it provides a powerful, centralized way to handle both complex and straightforward validation rules along with customizable error messages.

Helpful Links:

React Hook Form Documentation: https://react-hook-form.com/

Zod Documentation: https://zod.dev/

@hookform/resolvers: https://github.com/react-hook-form/resolvers

We hope this guide clarifies how to solve common form management issues using React Hook Form and Zod. Happy coding, and feel free to leave any questions or comments here!