Creating forms in React is a complex task. It involves handling all the input states and their changes and validating that input when the form gets submitted.

For simple forms, things are generally manageable. But as your form gets more complex and you need to add various validations, it becomes a complicated task.

So instead of manually writing all of the code and handling complex forms with validation logic, we can use the most popular React library for this, react-hook-form.

It's the most popular React library for creating forms compared to formik, react final form, and others

Why the react-hook-form Library is the Most Popular Form Library in React
Following are some of the reasons why react-hook-form is a popular choice for creating React forms.

The number of re-renders in the application is smaller compared to the alternatives because it uses refs instead of state.
The amount of code you have to write is less as compared to formik, react-final-form and other alternatives.
react-hook-form integrates well with the yup library for schema validation so you can combine your own validation schemas.
Mounting time is shorter compared to other alternatives.

Install the React Form Hooks

npm install react-hook-form

Using React Form Hooks

Use form hook in component.

 import {useForm} from 'react-hook-form';
 const {
    register,
    handleSubmit,reset,
    formState: { errors },
  } = useForm();

register is a function provided by the useForm hook. We can assign it to each input field so that the react-hook-form can track the changes for the input field value
handleSubmit is the function we can call when the form is submitted
errors is a nested property in the formState object which will contain the validation errors, if any

Now Apply this in a Register Component having 3 fields. (Userid, password, name)

return (
    <>
        <form onSubmit={handleSubmit(onSubmit)}>
        <h1 className='text-center alert-info'>Register</h1>
        <p className='alert-info'>{message}</p>
        <div className='form-group'>
            <label htmlFor="">Userid</label>
            <input  {...register("userid", {required: true})} type="text" className='form-control' placeholder='Type Userid Here' />
            {errors.userid && errors.userid.type === "required" && (
            <p className="errorMsg">Userid is required.</p>
          )}

        </div>
        <div className='form-group'>
            <label htmlFor="">Password</label>
            <input  {...register("password",{ required: true,
    minLength: 8
})} type="password" className='form-control' placeholder='Type Password Here' />
 {errors.password && errors.password.type === "required" && (
            <p className="errorMsg">Password is required.</p>
          )}
          {errors.password && errors.password.type === "minLength" && (
            <p className="errorMsg">
              Password should be at-least 8 characters.
            </p>
          )}
        </div>
        <div className='form-group'>
            <label htmlFor="">Name</label>
            <input  {...register("name",{required: true})} type="text" className='form-control' placeholder='Type Name Here' />
            {errors.name && errors.name.type === "required" && (
            <p className="errorMsg">Name is required.</p>
          )}
        </div>
        <div className='form-group'>
            <button className='btn btn-primary' type='submit'>Register</button>
        </div>
        </form>
    </>
  )

We're using the spread operator so react-hook-form will spread out all the required event handlers like onChange, onBlur, and other props for that input field.

We also added the onSubmit function which is passed to the handleSubmit method like this:

...

When we submit the form, the handleSubmit function will handle the form submission. It will send the user entered data to the onSubmit function where we're logging the user data to the console.

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

Now You get the Form Data

After this we want to add the form validation
How to Add Validations to the Form
Now, let’s add the required field and minimum length validation to the input fields.

To add validation we can pass an object to the register function as a second parameter like this:

<div className='form-group'>
            <label htmlFor="">Password</label>
            <input  {...register("password",{ required: true,
    minLength: 8
})} type="password" className='form-control' placeholder='Type Password Here' />
 {errors.password && errors.password.type === "required" && (
            <p className="errorMsg">Password is required.</p>
          )}
          {errors.password && errors.password.type === "minLength" && (
            <p className="errorMsg">
              Password should be at-least 8 characters.
            </p>
          )}
        </div>

How to Reset the Form Values
Sometimes, we need to reset/clear the data entered by the user after some action.

const { reset } = useForm();

That's all Folks :)