React Hook Form

# 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

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

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.

<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.

<form onSubmit={handleSubmit((data) => console.log(data))}>
  <button type="submit">Submit</button>
</form>

formState.erros

Contains Validation errors for each field

{errors.email && <p>{errors.email.message}</p>}

watch(fieldName)

Watches Specific input values in real-time

const password = watch("password");

reset(Values)

Resets the form to default values or clears it.

reset({ name: "", email: "", password: "" });

setValue(name, value)

Programmatically sets the field value.

setValue("email", "test@example.com");

getValues()

retrieves current form values.

const values = getValues();
console.log(values);