What is React Hook Form and how does it improve form handling in React applications?

React Hook Form is a lightweight library for managing complex forms in React. It offers excellent performance by minimizing re-renders, has zero dependencies, and provides an intuitive API. React Hook Form can be easily integrated with popular UI frameworks like Material UI and Ant Design, and supports advanced features such as form validation, state management, and TypeScript type safety. For example, in a test with a simple form containing two fields, React Hook Form required only 4 re-renders, while a normal form required 58 re-renders, demonstrating its efficiency.

How do you use React Hook Form in a React project?

To use React Hook Form, install it with npm i --save react-hook-form. Import the useForm hook, then use register to bind input fields and handleSubmit to manage form submission. React Hook Form supports integration with schema validation libraries like Yup, Zod, and Joi, and can be used with UI frameworks such as Ant Design.

What validation options does React Hook Form provide?

React Hook Form supports standard HTML validation rules such as required, min, max, minLength, maxLength, pattern, and custom validate functions. Error messages can be passed with validation rules for easy display. The library also integrates with schema validation libraries like Yup, Zod, and Joi for advanced validation needs.

How does React Hook Form handle performance compared to traditional React forms?

React Hook Form optimizes performance by minimizing re-renders when form values change. In a comparison, a simple form with two fields implemented with React Hook Form required only 4 re-renders, while a traditional form required 58. This efficiency becomes even more significant in complex forms.

Does React Hook Form support TypeScript?

Yes, React Hook Form supports TypeScript, providing additional type safety. You can define types for your form data and pass them to React Hook Form, which helps prevent type violations and improves developer experience.

What features does Hygraph offer?

Hygraph provides a GraphQL-native architecture, content federation, scalability, and a wide range of integrations. Key features include rapid content delivery, intuitive user interface, enterprise-grade security, and support for modern development workflows. Integrations cover hosting (Netlify, Vercel), eCommerce (Shopify, BigCommerce), localization (Lokalise, Crowdin), digital asset management (Cloudinary, AWS S3), personalization (Ninetailed), and AI (AltText.ai).

Does Hygraph provide an API?

Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. The API is well-documented and supports advanced querying, making it ideal for modern web and app development.

What integrations are available with Hygraph?

Hygraph integrates with a wide range of platforms and services, including Netlify, Vercel, Shopify, BigCommerce, commercetools, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic.

How does Hygraph optimize content delivery performance?

Hygraph is designed for optimized content delivery, ensuring rapid distribution and responsiveness. This leads to improved user experience, higher engagement, better search engine rankings, reduced bounce rates, and increased conversions.

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For full details and feature breakdowns, visit the pricing page.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. Features include SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments.

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale, improve development velocity, or re-platform from legacy solutions.

What business impact can customers expect from using Hygraph?

Customers can expect time savings, streamlined workflows, ease of use, faster speed-to-market, and enhanced customer experience through scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency.

What industries are represented in Hygraph's case studies?

Hygraph's case studies span food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness.

Can you share specific customer success stories using Hygraph?

Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture.

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for quick implementation and ease of use. For example, Top Villas launched a new project in just 2 months. Non-technical users can get started quickly by signing up for a free account and using onboarding resources.

What problems does Hygraph solve?

Hygraph addresses operational pains (reliance on developers, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache and OpenID integration issues).

How does Hygraph solve pain points for different personas?

For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it provides an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, supports scalability, and accelerates speed-to-market.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage.

What customer service and support does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel.

What training and technical support is available to help customers get started?

Hygraph offers onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers for expert guidance.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph provides 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, while all users can access documentation and the community Slack channel for additional help.

Why choose Hygraph over other CMS solutions?

Hygraph stands out with its GraphQL-native architecture, content federation, scalability, and ease of use. It enables impactful digital experiences, reduces costs, and improves efficiency. Hygraph's modern approach and integrations make it a strong choice for businesses seeking flexibility and performance.

Where can I find Hygraph's technical documentation?

Comprehensive technical documentation is available at Hygraph Documentation, covering everything from setup to advanced integrations.

Who are some of Hygraph's customers?

Hygraph is trusted by leading brands such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes.

What kind of content can I find in the Hygraph Blog?

The Hygraph Blog includes developer tutorials, latest updates, and essential guides to content modeling.

Who authored the blog post 'React Hook Form - A Complete Guide'?

The blog post was written by Aagam Vadecha, a Software Engineer at Hygraph.

What does the blog post encourage readers to do?

The blog post encourages readers to sign up for the newsletter to stay informed about releases and industry news.

React Hook Form - A Complete Guide

#What is React Hook Form

Most applications have forms to collect data, depending on the use case, implementing forms can be pretty complex, especially when building enterprise-level applications that provide an intuitive and flawless user experience. As a developer, it is highly likely that you have stumbled across building forms in most of your projects. Of course, you can manage simple forms on your own but after a point, it becomes sensible to use a library that abstracts a lot of work involved in handling complex forms.

React Hook Form is one such library that helps to manage complex forms. It comes with great performance, is super lightweight, has zero dependencies, can be easily integrated with different React UI frameworks like Material, Antd, and provides an intuitive API and excellent developer experience.

#How To Use React Hook Form

To get started, install the library with npm i --save react-hook-form

Using it inside your component is super simple, import the useForm hook from the library

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

The useForm hook gives us access to many properties, for now, we will only use register and handleSubmit. Inside your functional component destructure them

const { register, handleSubmit } = useForm();

Register an input element with a variable name like this, this will make the value of input available for form validation and form submission.

<input
 className="border-2 outline-none p-2 rounded-md"
 placeholder="Name"
 {...register("name")}
 />

Then you can handle your submit your form this way, and can create an onSubmit method which will have access to the forms data.

<form onSubmit={handleSubmit(onSubmit)}>

Below is a complete example

import { useState } from "react";
import { useForm } from "react-hook-form";

export default function ReactHookFormMini() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState("");
 
  const onSubmit = (data) => {
    setData(data)
  }

  return (
    <div className="w-full flex justify-center items-center bg-gray-900 p-8 border-r border-dashed">
      <div className="w-1/2 shadow-lg rounded-md bg-white p-8 flex flex-col" style={{height:'375px'}}>
        <h2 className="text-center font-medium text-2xl mb-4">
          React Hook Form Basic
        </h2>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex flex-1 flex-col justify-evenly"
        >
          <input
            className="border-2 outline-none p-2 rounded-md"
            placeholder="Name"
            {...register("name")}
          />
          <button
            className=" flex justify-center p-2 rounded-md w-1/2 self-center bg-gray-900  text-white hover:bg-gray-800"
            type='submit'
          >
            <span>
              Submit
            </span>
          </button>
        </form>
        <div className='h-4'>
          <p> Data: {JSON.stringify(data)}</p>
        </div>
      </div>
    </div>
  );
}

This is how it will look, we have used tailwind for the css, feel free to use your own CSS frameworks.

#Adding Validations

Validations are part and parcel of almost every form, they’re an application’s first line of defense against unwanted data. Validations ensure that incorrect data doesn’t reach the backend servers and eventually the databases. Ideally in most software data is validated at every layer i.e the Frontend, Backend, and Database.

For large forms, it can become tedious and repetitive to manage validations for each and every field and their error states. React Hook Form provides excellent API options and also aligns with the existing HTML standard for form validation, here is the list of validation rules supported by the library:

required - The input value is mandatory or not
min - The minimum value that can be accepted
max - The maximum value that can be accepted
minLength - The minimum length of input that can be accepted
maxLength - The minimum length of input that can be accepted
pattern - A regex pattern to validate the input
validate- Any custom function to validate the input

A simple example on how to use these attributes

<input
 className="border-2 outline-none p-2 rounded-md"
 placeholder="Phone Number"
 {...register("phoneNumber", {
    minLength: 1,
    maxLength: 10,
 })}
 />

Also, you can pass error messages with the validation rule, this will make displaying errors very simple.

<input
 className="border-2 outline-none p-2 rounded-md"
 placeholder="Email"
 {...register("email", {
 pattern: {
   value: /^.*@hygraph.com$/,
   message: 'Email must end with hygraph.com'
 }
 })}
 />

You can get the error object from useFrom and then display the error message in the template.

const { formState: { errors } } = useForm();

<span className="text-sm text-red-700">
   {errors?.email?.message}
</span>

#Schema Validation Libraries

React hook form also supports integration with well known schema validation libraries. You can use libraries like Zod, Joi, or Yup inside your forms along with React hook form. Let us check out an example with the Yup schema validation library.

First, we need to declare our form data schema as shown below

// ...  
const schema = yup  
  .object({  
    fullName: yup.string().required(),  
    age: yup.number().positive().integer().required(),  
  })  
  .required();  
// ...

Then we can import the yup resolver from yup, and pass it to the useForm method of React Hook Form.

import { yupResolver } from "@hookform/resolvers/yup";

// ...

const {  
  register,  
  handleSubmit,  
  formState: { errors },  
} = useForm({  
  resolver: yupResolver(schema),  
});

// ...

Here is a complete example

import * as yup from "yup";  
import { yupResolver } from "@hookform/resolvers/yup";  
import { useForm } from "react-hook-form";

const schema = yup  
  .object({  
    fullName: yup.string().required(),  
    age: yup.number().positive().integer().required(),  
  })  
  .required();

export default function YupExample() {  
  const {  
    register,  
    handleSubmit,  
    formState: { errors },  
  } = useForm({  
    resolver: yupResolver(schema),  
  });  
  const onSubmit = (data) => console.log(data);

  return (  
    <form onSubmit={handleSubmit(onSubmit)}>  
      <input {...register("fullName")} />  
      <p>{errors.fullName?.message}</p>

      <input {...register("age")} />  
      <p>{errors.age?.message}</p>

      <input type="submit" />  
    </form>  
  );  
}

#Integrating with Other Components

It is possible that we have UI Frameworks already set up and are using UI components from that library, React Hook Form can integrate with those UI frameworks as well. In the below example you can find how to integrate React Hook Form with AntD’s input components.

import React, { useState } from 'react';
import { Controller, useForm } from "react-hook-form";
import { Input, Checkbox, Slider } from "antd";


export default function RFHWithAntd() {
  const { control, handleSubmit } = useForm();
  const [data, setData] = useState({});
  const onSubmit = (data) => {
    setData(data)
  }
  return (
    <div className="w-full flex justify-center items-center bg-gray-900 p-8 border-r border-dashed">
      <div className="w-1/2 shadow-lg rounded-md bg-white p-8 flex flex-col" style={{ height: '375px' }}>
      <h2 className="text-center font-medium text-2xl mb-4">
          React Hook Form With AntD
        </h2>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex flex-1 flex-col justify-evenly"
        >
          <Controller
            control={control}
            name="name"
            render={({ field }) => (
            <Input
             {...field}
             placeholder="Name"
            />
            )}
          />

          <div className="flex">
            <label>Is Developer?</label>
            <Controller
              control={control}
              name="isDeveloper"
              render={({ field: { value, onChange } }) => (
                <Checkbox
                  className="ml-4"
                  checked={value}
                  onChange={(e) => {
                    onChange(e.target.checked);
                  }}
                />
              )}
            /></div>


          <section>
            <label>Experience In Years</label>
            <Controller
              control={control}
              name="experience"
              render={({ field }) => <Slider {...field} />}
            />
          </section>

         
          <button
            className=" flex justify-center p-2 rounded-md w-1/2 
            self-center bg-gray-900  text-white hover:bg-gray-800"
            type='submit'
          >
            <span>
              Submit
            </span>
          </button>
        </form>
        <div className='h-4'>
          <p> Data: {JSON.stringify(data)}</p>
        </div>
      </div>
    </div>
  )
};

#React Hook Form Examples

Typescript

React hook form supports TypeScript which gives additional type safety to our code. We can define the types for our form data and pass it to React Hook Form as shown below

import { useForm } from "react-hook-form"

type FormData = {  
  firstName: string  
  age: number  
}

export default function TypeScriptExample() {  
  // ...  
  const {  
    register,  
    setValue,  
    handleSubmit,  
    formState: { errors },  
  } = useForm<FormData>()  
  const onSubmit = handleSubmit((data) => console.log(data))

  return (  
    // ...  
  )  
}

That's it, now React Hook Form is now aware how our form data looks and it will try to prevent any type violations. For example, if we add the code below in the markup of the Typescript form, it will show us a type error saying property name does not exist on type FormData

return (  
    // ...  
    {errors.name?.message}  
    // ...  
  )

Comparing Performance

We mentioned earlier that React Hook Form delivers great performance, one of the reasons for the same is how the library manages re-renders. Compared to any other library or an implementation of a Form in React from scratch, React Hook Form hardly performs any re-renders when values inside your form change, which is a great optimization to have out of the box. We can go through an example to establish this, we will build two forms with the same functionality. One with implementation from scratch and another with React Hook Form, then compare the re-renders for the same input.

Normal form

import React, { useState } from 'react';
let renderCount = 0

export default function NormalForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [showFormData, setShowFormData] = useState(false)
  const onSubmit = (event) => {
    event.preventDefault()
    setShowFormData(true)
    console.log('Run Validations Manually, maintain & show errors on UI, if all good make API call.')
  }

  renderCount += 1
  return (
    <div className="w-1/2 flex justify-center items-center bg-gray-900 p-8">
      <div className="w-full shadow-lg rounded-md bg-white p-8 flex flex-col" style={{ height: '375px' }}>
        <h2 className="text-center font-medium text-2xl mb-4">
          Normal Form
        </h2>
        Render Count -- {renderCount}
        <form
          onSubmit={onSubmit}
          className="flex flex-1 flex-col justify-evenly"
        >
          <input
            className="border-2 outline-none p-2 rounded-md"
            placeholder="Name"
            value={name}
            onChange={(e) => { setName(e.target.value) }}
          />
          <input
            className="border-2 outline-none p-2 rounded-md"
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => { setEmail(e.target.value) }}
          />
          <button
            className=" flex justify-center p-2 rounded-md 
            w-1/2 self-center bg-gray-900  text-white hover:bg-gray-800"
            type='submit'
          >
            <span>
              Submit
            </span>
          </button>
        </form>
        {

          <div className='h-4'>
            <p> Data:
              {
                showFormData ?
                  <span> {name} {email} </span>
                  : null
              }
            </p>
          </div>
        }
      </div>
    </div>
  );
}

React Hook Form

import { useState } from "react";
import { useForm } from "react-hook-form";
let renderCount = 0

export default function ReactHookForm() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState("");

  const onSubmit = (data) => {
    setData(JSON.stringify(data))
  }

  renderCount += 1
  return (
    <div className="w-1/2 flex justify-center items-center bg-gray-900 p-8 border-r border-dashed">
      <div className="w-full shadow-lg rounded-md bg-white p-8 flex flex-col" style={{ height: '375px' }}>
        <h2 className="text-center font-medium text-2xl mb-4">
          React Hook Form
        </h2>
        Render Count -- {renderCount}
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex flex-1 flex-col justify-evenly"
        >
          <input
            className="border-2 outline-none p-2 rounded-md"
            placeholder="Name"
            {...register("name")}
          />
          <input
            className="border-2 outline-none p-2 rounded-md"
            placeholder="Email"
            {...register("email")}
          />
          <button
            className=" flex justify-center p-2 rounded-md
            w-1/2 self-center bg-gray-900  text-white hover:bg-gray-800"
            type='submit'
          >
            <span>
              Submit
            </span>
          </button>
        </form>
        <div className='h-4'>
          <p> Data: {data}</p>
        </div>
      </div>
    </div>
  );
}

At the start. without any insertions in the form.

After inserting the same values in the form and hitting submit.

React Hook Form took 4 re-renders while the normal form took 58, the difference is substantial. Also, this is a very simple form with two fields, so you can imagine that the re-renders in a complex form will be even more.

Advanced Example

To strengthen our understanding, we can go one step further and explore the other available API options.
The useForm hook provides a formState property which gives us more details about the user’s interaction with our form.

isDirty: boolean value that denotes if the user interacted with the form
isValid: boolean value that denotes if the current form state is valid.
errors: an object that contains errors if any of the validations are failing.
isSubmitted: boolean value that denotes if the user has tried to submit the form at least once
touchedFields: an object which holds the touched fields.
dirtyFields: an object which holds the dirty fields.

The difference between dirty and touched fields is that If the user clicks on a text input, it’s marked as touched but not dirty, after that, if the user also enters any value inside the text input then only it is marked as dirty.

The useForm hook also provides a watch function, which can be used to watch on form inputs and display other fields dynamically. Dynamic forms are a common use case, where form fields are shown dynamically based on what a user enters in previous fields.

Here’s a complete advanced example showing the use of all the above properties.

import { useState } from 'react';
import { useForm } from 'react-hook-form';
let renderCount = 0

export default function ReactHookFormAdvanced() {
  const {
    register,
    handleSubmit,
    formState: { touchedFields, isDirty, isValid, dirtyFields, isSubmitted, errors },
    watch
  } = useForm();

  const [data, setData] = useState('');
  const watchIsDeveloper = watch('isDeveloper');
  renderCount += 1
  return (
    <div className='w-full flex justify-center items-center bg-gray-900 p-8'>
      <div className='w-2/3 shadow-lg rounded-md bg-white p-8 flex flex-col justify-start' style={{ height: '700px' }}>
        <h2 className='text-center font-medium text-2xl mb-4'>
          React Hook Form Advanced
        </h2>
        Render Count -- {renderCount}
        <form
          onSubmit={handleSubmit(setData)}
          className='flex flex-1 flex-col justify-evenly'
        >
          <input
            className='border-2 outline-none p-2 rounded-md'
            placeholder='Name'
            {...register('name')}
          />

          <input
            className='border-2 outline-none p-2 rounded-md'
            placeholder='Email'
            {...register('email', { required: 'Email is required.' })}
          />

          <input
            className='border-2 outline-none p-2 rounded-md'
            placeholder='Phone Number'
            {...register('phoneNumber')}
          />
          <div>
            <span className='mr-4'>
              Are you a developer?
            </span>
            <input type='checkbox' {...register('isDeveloper')} />
          </div>
          {
            watchIsDeveloper ?
              <div className='flex w-full '>
                <input
                  className='flex-1 border-2 outline-none p-2 rounded-md mr-2'
                  placeholder='Experience (Years)'
                  {...register('exp_years')} />
                <input
                  className='flex-1 border-2 outline-none p-2 rounded-md'
                  placeholder='Experience (Months)'
                  {...register('exp_months')} />
              </div>
              : null
          }

          <button
            className=' flex justify-center p-2 rounded-md
            w-1/2 self-center bg-gray-900  text-white hover:bg-gray-800'
            type='submit'
          >
            <span>
              Submit
            </span>
          </button>
        </form>

        <p className='w-4/5'> <strong> Data: </strong> {JSON.stringify(data)} </p>
        <p> <strong> Is Valid: </strong> {JSON.stringify(isValid)}</p>
        <p> <strong> Is Dirty : </strong> {JSON.stringify(isDirty)} </p>
        <p> <strong> Is Submited: </strong> {JSON.stringify(isSubmitted)}</p>
        <p> <strong> Errors: </strong> {JSON.stringify(errors?.email?.message)}</p>
        <p> <strong> Dirty Fields : </strong> {JSON.stringify(dirtyFields)} </p>
        <p> <strong> Touched Fields: </strong> {JSON.stringify(touchedFields)} </p>
        <p> <strong> Watching Is Developer: </strong> {JSON.stringify(watchIsDeveloper)}</p>

      </div>
    </div>

  );
}

Blog Author

Aagam Vadecha

As a Software Engineer, my daily routine revolves around writing scalable applications with clean code & maintaining them. In my spare time, I love to explore software architecture patterns, write tech articles & watch thrillers!

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.

Frequently Asked Questions

Product Information: React Hook Form & Hygraph