What is React Hook Form?

React Hook Form is a lightweight form validation library for React that helps you create forms with easy validation and less code. It reduces unnecessary re-renders and provides better performance compared to traditional form handling methods.

Why Choose React Hook Form? 🤔

• Less code compared to traditional form handling

• Better performance with minimal re-renders

• Built-in form validation

• No dependencies

• TypeScript support

• Easy integration with UI libraries

Installation 🚀

# Using npm
npm install react-hook-form

# Using yarn
yarn add react-hook-form

# Using pnpm
pnpm add react-hook-form

Basic Usage 📝

1. Step 1: Import and Setup

   import { useForm } from 'react-hook-form';
   
   function RegisterForm() {
     const { register, handleSubmit, formState: {  errors, isSubmitting } } = useForm();
     
     const onSubmit = (data) => {
       console.log(data);
     };
   }

2. Step 2: Create Form with Validation

   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       {/* Username field */}
       <input
         {...register("username", {
           required: "Username is required",
           minLength: {
             value: 3,
             message: "Username must be at least 3 characters"
           }
         })}
         placeholder="Username"
       />
       {errors.username && <p>{errors.username.message}</p>}
   
       {/* Email field */}
       <input
         {...register("email", {
           required: "Email is required",
           pattern: {
             value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
             message: "Invalid email address"
           }
         })}
         placeholder="Email"
       />
       {errors.email && <p>{errors.email.message}</p>}
   
       { !isSubmitting && <button type="submit">Submit</button> }
     </form>
   );

Form Validation Options 🔍

1. Basic Validation Rules

   {
     required: "This field is required",
     minLength: { value: 4, message: "Minimum length is 4" },
     maxLength: { value: 20, message: "Maximum length is 20" },
     pattern: { value: /regex/, message: "Invalid format" }
   }

2. Custom Validation

   {
     validate: (value) => value === "correct" || "Invalid value"
   }

Handling Different Input Types 📋

1. Select Fields

   <select {...register("category", { required: true })}>
     <option value="">Select...</option>
     <option value="A">Option A</option>
     <option value="B">Option B</option>
   </select>

2. Checkbox

   <input 
     type="checkbox" 
     {...register("terms")} 
   />

3. Radio Buttons

   <input 
     type="radio" 
     value="option1" 
     {...register("options")} 
   />

Advanced Features 🔥

1. Form Watch (Live Values)

   const { watch } = useForm();
   const watchUsername = watch("username"); // Watch single field
   const allValues = watch(); // Watch all fields

2. Form Reset

   const { reset } = useForm();
   
   // Reset entire form
   reset();
   
   // Reset with values
   reset({
     username: "newValue",
     email: "new@email.com"
   });

3. Custom Validation

   const validateAge = async (value) => {
     const age = parseInt(value);
     if (age < 18) {
       return "Must be at least 18 years old";
     }
     return true;
   };
   
   <input
     type="number"
     {...register("age", {
       validate: validateAge
     })}
   />

Best Practices 💡

1. Error Handling

   • Always display validation errors clearly

   • Use meaningful error messages

   • Handle server-side errors appropriately

2. Form State

   • Use isSubmitting to disable submit button

   • Clear form after successful submission

   • Preserve form data when needed

3. Validation

   • Add proper validation rules

   • Use custom validation when needed

   • Implement real-time validation when appropriate

4. Performance

   • Use defaultValues for initial form data

   • Implement form reset properly

   • Avoid unnecessary re-renders

That's a comprehensive guide to React Hook Form! Start building better forms today! 🚀