React Hook Form

Sachin Chauhan

3 min read

·

Feb 10, 2026

--

Listen

Share

# React Hook Form (RHF)

Forms are the backbone of user interaction. Whether it is sigining up, log in or submitting feedback. But handling them in react can quickly become messy if you rely only on traditional state management g `useState()` hook.That’s where `React Hook Form (RHF)`
comes in—a lightweight library designed to make form handling smooth, performant, and developer-friendly.

## The Pain Points of Normal Form Handling
- **State Explosion**- Each input field needs its own useState or a centralized state object. As forms grow, managing this state becomes cumbersome.

- **Re-renders**: Every keystroke triggers a re-render, which can hurt performance in large forms.

- **Validation complexity**: You often need to write custom validation logic or integrate external libraries manually.

- **Boilerplate code**: Handling onChange, onBlur, and error messages requires repetitive code.


## Key Advantages of React Hook Form

- **Uncontrolled Inputs by Default**: RHF leverages the native DOM input behavior, reducing unnecessary React re-renders.

- **Built-in Validation**: Simple rules like required, minLength, or custom validators can be added directly in the register() function.

- **Integration with Schema Validators**: Works seamlessly with libraries like Yup or Zod for complex validation.

- **Cleaner Code**: Less boilerplate means faster development and easier maintenance.

- **Better Performance**: Especially noticeable in large forms with many fields.


## React Hook Form
React Hook Form (RHF) is a lightweight library for managing forms in React.  
It reduces boilerplate, improves performance, and provides built-in validation.
## Installation

```bash
npm install react-hook-form
```

## Comparesion with Login Form

### Normal Form Handling

```jsx
import React, { useState } from "react";

function LoginForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  });
  const [errors, setErrors] = useState({});

  const validate = () => {
    let newErrors = {};
    if (!formData.name) newErrors.name = "Name is required";
    if (!formData.email) {
      newErrors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid";
    }
    if (!formData.password) {
      newErrors.password = "Password is required";
    } else if (formData.password.length < 6) {
      newErrors.password = "Password must be at least 6 characters";
    }
    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
    } else {
      console.log("Form submitted:", formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      {errors.name && <p>{errors.name}</p>}

      <input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />
      {errors.email && <p>{errors.email}</p>}

      <input
        type="password"
        placeholder="Password"
        value={formData.password}
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
      />
      {errors.password && <p>{errors.password}</p>}

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

export default LoginForm;
```

#### DownSides

- Lots of boilerplate (useState, onChange, manual validation).
- Every keystroke triggers a re-render.
- Error handling requires extra state.


### React Hook Form Handling

```jsx
import React from "react";
import { useForm } from "react-hook-form";

function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="Name"
        {...register("name", { required: "Name is required" })}
      />
      {errors.name && <p>{errors.name.message}</p>}

      <input
        type="email"
        placeholder="Email"
        {...register("email", {
          required: "Email is required",
          pattern: { value: /\S+@\S+\.\S+/, message: "Email is invalid" },
        })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input
        type="password"
        placeholder="Password"
        {...register("password", {
          required: "Password is required",
          minLength: { value: 6, message: "Password must be at least 6 characters" },
        })}
      />
      {errors.password && <p>{errors.password.message}</p>}

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

export default LoginForm;
```

#### Benfits

- No useState for each field.
- Validation rules are declared inline with register.
- Errors are automatically tracked in formState.errors.
- Fewer re-renders since inputs are uncontrolled by default.


## React Hook Form Functions

React Hook Form provides a set of powerful functions to simplify form handling in React.  
This document explains the main functions and how to use them.

#### `register(name, options)`
`register` is an input field and attaches validation rules.
```jsx
<input {...register("email", { 
  required: "Email is required", 
  pattern: { value: /\S+@\S+\.\S+/, message: "Invalid email" } 
})} />
```

#### `handleSubmit(Callaback)`
Handle Form submission and runs validations before calling your callback.
```jsx
<form onSubmit={handleSubmit((data) => console.log(data))}>
  <button type="submit">Submit</button>
</form>
```

#### `formState.erros`
Contains Validation errors for each field
```jsx
{errors.email && <p>{errors.email.message}</p>}
```

#### `watch(fieldName)`
Watches Specific input values in real-time
```jsx
const password = watch("password");
```

#### `reset(Values)`
Resets the form to default values or clears it.
```jsx
reset({ name: "", email: "", password: "" });
```

#### `setValue(name, value)`
Programmatically sets the field value.
```jsx
setValue("email", "test@example.com");
```

#### `getValues()`
retrieves current form values.
```jsx
const values = getValues();
console.log(values);
```