React Hook Form

React Hook Form = performant form library with minimal re-renders

---

What is React Hook Form?

"Performant form library"

React Hook Form is a performant, flexible form library for React with easy validation.

"React Hook Form is a form library that minimizes re-renders by using uncontrolled components and refs, providing better performance than controlled form libraries."

---

Key Features

Performance · Validation · Simple API

• Performance: Minimal re-renders
• Validation: Built-in and schema validation
• Simple API: Easy to use
• Small bundle: Lightweight

"React Hook Form provides excellent performance with minimal re-renders, built-in validation, and a simple API."

---

Basic Usage

useForm hook + register

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

function Form() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <button type="submit">Submit</button>
    </form>
  );
}

"React Hook Form uses useForm hook and register function to connect inputs, with handleSubmit for form submission."

---

Validation

Built-in rules or schema

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

<input
  {...register("email", {
    required: "Email is required",
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: "Invalid email",
    },
  })}
/>;
{
  errors.email && <span>{errors.email.message}</span>;
}

"React Hook Form supports built-in validation rules or schema validation with libraries like Yup or Zod."

---

Why Better Performance?

Uncontrolled components + refs

• Uses uncontrolled components (refs)
• Doesn't re-render on every keystroke
• Only validates on submit/blur
• Minimal component updates

"React Hook Form uses uncontrolled components with refs, avoiding re-renders on every input change for better performance."

---

Schema Validation

Yup · Zod integration

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  email: yup.string().email().required(),
  age: yup.number().positive().required(),
});

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

"React Hook Form integrates with validation libraries like Yup or Zod for schema-based validation."

---

Form State

formState for errors, touched, dirty

const {
  formState: { errors, touchedFields, dirtyFields, isDirty },
} = useForm();

// Check if form is dirty
if (isDirty) {
  // Show save button
}

"formState provides information about form state: errors, touched fields, dirty fields, and validation status."

---

watch() vs getValues()

watch = reactive, getValues = one-time

const { watch, getValues } = useForm();

// watch - reactive, causes re-render
const email = watch("email");

// getValues - one-time, no re-render
const email = getValues("email");

"watch() is reactive and causes re-renders, getValues() gets value once without re-rendering."

---

9️⃣ reset() and setValue()

Programmatic form control

const { reset, setValue } = useForm();

// Reset form
reset({ name: "", email: "" });

// Set value programmatically
setValue("name", "John");

"reset() clears form, setValue() sets field values programmatically."

---

vs Other Form Libraries

Better performance, simpler API

Feature	React Hook Form	Formik
Re-renders	Minimal	More
Bundle size	Smaller	Larger
API	Simpler	More verbose
Performance	Better	Good

"React Hook Form offers better performance with minimal re-renders and a simpler API compared to alternatives like Formik."

---

"React Hook Form is a performant form library that uses uncontrolled components and refs to minimize re-renders. It provides built-in validation, schema validation support (Yup/Zod), and a simple API with useForm hook. It offers better performance than controlled form libraries by avoiding re-renders on every keystroke."

---

🧠 Ultra-Short Cheat Sheet

Performant form library
Uncontrolled components
Minimal re-renders
useForm hook
register function
Built-in validation
Schema validation (Yup/Zod)
formState for errors
watch() vs getValues()