Back to articles

Level Up Your React Forms: A Comprehensive Guide to React Hook Form and Yup

Majd Muhtaseb05/02/202510 minutes

Introduction

Building forms in React can be challenging, especially when dealing with complex validation requirements. React Hook Form and Yup offer a streamlined and efficient solution for managing form state and validation, making your code cleaner and easier to maintain. This guide will walk you through the basics of using these libraries together.

What are React Hook Form and Yup?

• React Hook Form: A performant and flexible library for building forms in React using hooks. It minimizes re-renders and provides a simple API for registering form inputs and handling form submissions.
• Yup: A JavaScript schema builder for parsing and validating values. It defines schemas that describe the expected structure and types of your data, making it ideal for validating form inputs.

Setting Up Your Project

First, install the necessary packages:

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

Creating a Simple Form

Let's create a simple form with name and email fields:

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  name: yup.string().required("Name is required"),
  email: yup.string().email("Invalid email format").required("Email is required"),
}).required();

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => {
    console.log(data); // Process your form data here
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" {...register("name")} />
        <p>{errors.name?.message}</p>
      </div>

      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" {...register("email")} />
        <p>{errors.email?.message}</p>
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Explanation:

1. Import necessary modules: We import useForm from react-hook-form, yupResolver from @hookform/resolvers/yup, and yup itself.
2. Define the Yup schema: We create a Yup schema that defines the validation rules for our form fields. name is a required string, and email is a required string that must be a valid email address.
3. Use useForm hook: The useForm hook is the heart of react-hook-form. We pass the yupResolver along with our schema to automatically integrate Yup for validation.
4. Register form inputs: The register function is used to register form inputs with react-hook-form. The spread operator ...register("name") and ...register("email") registers the input elements.
5. Handle form submission: The handleSubmit function wraps our onSubmit function, which is called when the form is submitted. handleSubmit ensures that the form is validated before calling onSubmit.
6. Access validation errors: The errors object contains any validation errors. We can access the error messages using optional chaining (errors.name?.message).

Benefits of Using React Hook Form and Yup

• Improved Performance: React Hook Form minimizes re-renders, leading to better performance, especially in complex forms.
• Simplified Validation: Yup makes it easy to define complex validation rules and provides clear error messages.
• Cleaner Code: The combination of these libraries results in cleaner, more maintainable code.
• Easy Integration: The @hookform/resolvers/yup package simplifies the integration between React Hook Form and Yup.

Conclusion

React Hook Form and Yup are a powerful combination for building robust and validated forms in React. By leveraging these libraries, you can simplify form handling, improve performance, and write cleaner code. Experiment with different validation rules and form configurations to unlock the full potential of these tools.