How to Use React Hook Form: Simple Guide with Examples

To use react-hook-form, first install it with npm install react-hook-form. Then, import useForm from the library, call it inside your component to get form methods, and use register to connect inputs to the form state. Finally, handle form submission with handleSubmit.

Syntax

The main parts of React Hook Form are:

• useForm(): Initializes form methods like register and handleSubmit.
• register: Connects input fields to the form state.
• handleSubmit: Wraps your submit function to handle validation and data.
• formState.errors: Holds validation errors for inputs.

jsx

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fieldName', { required: true })} />
      {errors.fieldName && <span>This field is required</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

Example

This example shows a simple form with a name input that is required. When submitted, it logs the form data to the console.

jsx

import React from 'react';
import { useForm } from 'react-hook-form';

export default function SimpleForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
    alert(`Hello, ${data.name}!`);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input
        id="name"
        {...register('name', { required: 'Name is required' })}
        aria-invalid={errors.name ? 'true' : 'false'}
      />
      {errors.name && <p role="alert" style={{ color: 'red' }}>{errors.name.message}</p>}

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

Output

A form with a labeled input for 'Name' and a 'Greet' button. If submitted empty, shows a red error message 'Name is required'. If filled, shows an alert greeting with the entered name.

Common Pitfalls

Common mistakes when using React Hook Form include:

• Not using register on inputs, so they don't connect to form state.
• Forgetting to wrap the submit handler with handleSubmit, causing no validation or data handling.
• Not handling validation errors, so users don't see feedback.
• Using uncontrolled inputs without defaultValue or defaultChecked when needed.

jsx

/* Wrong: Missing handleSubmit wrapper */
<form onSubmit={onSubmit}>
  <input {...register('email')} />
  <button type="submit">Send</button>
</form>

/* Right: Using handleSubmit */
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register('email')} />
  <button type="submit">Send</button>
</form>

Quick Reference

Feature	Description	Example
useForm()	Initializes form methods	const { register, handleSubmit } = useForm();
register	Connects input to form state
handleSubmit	Handles form submit with validation
formState.errors	Holds validation errors	errors.email && Error
Validation rules	Add rules like required	register('name', { required: true })

Key Takeaways

Always use useForm() to get form methods like register and handleSubmit.

Connect inputs with register to track their values and validation.

Wrap your submit function with handleSubmit to process form data correctly.

Check formState.errors to show validation feedback to users.

Remember to provide default values for uncontrolled inputs when needed.