React Forms with react-hook-form: Validation and Submission (2026)

React Hook Form is so good at validation that it can actually make your forms more robust by making them feel faster.

Let’s watch a form in action. Imagine we’re building a simple signup form with fields for firstName, lastName, and email.

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input
          id="firstName"
          {...register('firstName', { required: 'First name is required' })}
        />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input
          id="lastName"
          {...register('lastName', { required: 'Last name is required' })}
        />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          {...register('email', {
            required: 'Email is required',
            pattern: {
              value: /^\S+@\S+$/i,
              message: 'Invalid email address'
            }
          })}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

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

export default SignupForm;

When you try to submit this form without filling anything out, React Hook Form immediately highlights the missing fields. Notice how there’s no visible loading state or delay before the error messages appear. This is because React Hook Form doesn’t re-render the entire component on every keystroke. Instead, it uses a ref-based approach to access and update form values, leading to significantly better performance.

The core problem React Hook Form solves is the performance and complexity associated with managing form state in React. Traditional approaches often involve using useState for each form input, leading to numerous re-renders on every keystroke. This can quickly bog down applications, especially with complex forms. React Hook Form bypasses this by:

1. Ref-based State Management: Instead of relying on React’s state, it uses refs to directly access DOM input values. This means changes to input values don’t trigger component re-renders.
2. Uncontrolled Components: It treats form inputs as uncontrolled components. You register them with the register function, and the hook manages their values internally.
3. Event Delegation: It uses event delegation at the form level, further reducing the number of event listeners needed.

When you register('fieldName', validationRules), you’re telling React Hook Form to connect a DOM input to its internal state management. The validationRules object is where you define your validation logic. Common rules include:

• required: A boolean or a message string if the field is mandatory.
• minLength, maxLength: For string inputs.
• min, max: For number or date inputs.
• pattern: A regular expression to validate the input’s format.
• validate: A function for custom validation logic.

The formState object provides access to errors. errors.fieldName will contain an object with a message property if the validation for that field fails.

The handleSubmit function is a higher-order function that wraps your submission logic. It first triggers validation and, if all fields are valid, calls your onSubmit function with the form data.

The true power of React Hook Form lies in its ability to integrate validation seamlessly without sacrificing performance. It achieves this by leveraging the browser’s native validation API under the hood and augmenting it with its own efficient state management. You can even pass the ref directly to your input element using the spread operator ({...register('fieldName')}). This allows React Hook Form to efficiently track changes and apply validation rules without re-rendering your component on every keystroke, making your forms feel incredibly responsive even with complex validation rules.

What most developers don’t realize is that the register function can accept a second argument that is not just an object of validation rules, but a function that receives the current form values as an argument, enabling cross-field validation directly. For example, to ensure a passwordConfirm field matches a password field, you’d use register('passwordConfirm', { validate: (value) => value === getValues('password') || 'Passwords do not match' }). This allows for powerful, dynamic validation logic that doesn’t require separate state management or complex event handlers.

The next hurdle is often managing asynchronous validation, like checking if a username is already taken.