Handle Forms Easily in React Using "React Hook Form"

👋 Intro

Hey Hoimes, Handling forms in React can get messy — especially when you deal with validation, error handling, and nested inputs. Also, you have to write more lines of code to handle the state and it’s make re-render process again and again and again. Nah, that’s not our way of coding. That’s where React Hook Form comes to the rescue you.

In this post, I’ll show you how to build a simple form using React Hook Form — with validation and error handling — in less than 10 minutes.

💡Why should we use this

Think about this: You are writing code for a form component. The form contains so many input fields. So tell me, what will happen?.

1. If any changes occur, the DOM will re-render the components. This re-rendering process causes performance issues. The react hook form updates the form’s Data without the re-rendering process.

2. You need to write extensive code to manage the changes. You use the “useReducer” hook.

🧰 What You’ll Need

• Basic knowledge of React

• A React project (You can use Vite or Create React App)

• npm or yarn

I don’t wanna waste time. Let's jump to the code.

🛠️ Step 1: Install React Hook Form

npm install react-hook-form

Copy this command and put it in your bash (ensure the folder path is correct).

🧪 Step 2: Create a Simple Contact Form

📝Important note: For this example, we are using the MUI TextField component.

import React from 'react';
import { TextField } from "@mui/material"; // we are using the MUI input field
import { useForm, Controller } from "react-hook-form";

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      <div>
        <label>Name:</label>
        <Controller
            control={control}
            name="Name"
            rules={{ required: "Please give a name" }}
            render={({ field, fieldState: { error } }) => (
                   <TextField
                     {...field}
                      fullWidth
                      id="outlined-basic"
                      variant="outlined"
                      placeholder="Enter Name"
                      error={!!error}
                      helperText={error?.message ?? ""}
                     />
               )}
          />
      </div>

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

export default ContactForm;

✅ What’s Happening Here?

• handleSubmit() Handles form submission.

• error Gives you access to form validation messages.

• We use a simple rules set to validate Name.

📦 Bonus: Add Default Values or Reset

Want to prefill the form? Use the defaultValues option like this:

const { register, handleSubmit, reset } = useForm({
  defaultValues: {
    name: 'John Doe'
  }
});

🧠 Conclusion

React Hook Form makes form handling in React cleaner, simpler, and faster. If you’re still managing form state manually, give this library a try — it’ll save you tons of time!

Just beat it…

If you want more details, comment below.