Frequently Asked Questions

React Hook Form Usage & Integration

What is React Hook Form and how does it help manage forms in React applications?

React Hook Form is a lightweight library for managing complex forms in React applications. It provides an intuitive API, excellent developer experience, and integrates easily with popular UI frameworks like Material UI and Ant Design. React Hook Form optimizes performance by minimizing re-renders and supports features such as validation, schema integration, and dynamic form fields. (Source)

How do I add validations to forms using React Hook Form?

React Hook Form supports a variety of validation rules, including required, min, max, minLength, maxLength, pattern, and custom validation functions. You can pass error messages with validation rules and display errors in your template using the formState.errors object. (Source)

Can React Hook Form integrate with schema validation libraries?

Yes, React Hook Form integrates with popular schema validation libraries such as Zod, Joi, and Yup. You can define your schema and use resolvers like yupResolver to validate form data. (Source)

How does React Hook Form perform compared to traditional form implementations?

React Hook Form is optimized for performance and minimizes re-renders. In a comparison example, React Hook Form required only 4 re-renders for a simple form, while a traditional implementation took 58 re-renders. This efficiency is especially beneficial for complex forms. (Source)

Can I use React Hook Form with TypeScript?

Yes, React Hook Form supports TypeScript, allowing you to define types for your form data and benefit from additional type safety. (Source)

How do I integrate React Hook Form with other UI frameworks?

React Hook Form can be integrated with UI frameworks such as Ant Design and Material UI using the Controller component. This allows you to use custom input components while maintaining form state and validation. (Source)

Hygraph Platform Features & Capabilities

What is Hygraph and what are its key capabilities?

Hygraph is a GraphQL-native Headless CMS designed to empower teams to build engaging digital experiences at scale. Key capabilities include Smart Edge Cache for performance, Content Federation to integrate data from multiple sources, advanced Rich Text management, custom roles for granular access control, project backups, and industry-leading APIs for flexibility and productivity. (Source)

What problems does Hygraph solve for businesses?

Hygraph addresses operational inefficiencies by eliminating the need for developers to update content, resolving legacy tech stack issues, and improving content workflows. It reduces operational costs, accelerates speed-to-market, and simplifies integration and scaling. Technical challenges such as evolving schemas, cache issues, and integration with multiple GraphQL endpoints are also addressed. (Source)

What are some unique features of Hygraph?

Hygraph offers Smart Edge Cache for enhanced performance, Content Federation to solve data silos, advanced Rich Text management, custom roles for access control, project backups, and seamless integration with eCommerce, localization, and other systems. (Source)

Does Hygraph provide APIs for integration?

Yes, Hygraph provides GraphQL Content API, GraphQL Management API, Public API, and supports both REST and GraphQL APIs for seamless integration with external systems. (Source)

What integrations are available with Hygraph?

Hygraph integrates with digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), hosting and deployment (Netlify, Vercel), eCommerce (BigCommerce, commercetools, Shopify), localization (Lokalise, Crowdin, EasyTranslate, Smartling), personalization (Ninetailed), AI (AltText.ai), and more. (Source)

What technical documentation is available for Hygraph?

Hygraph offers comprehensive documentation, including API references, guides for content workflows, webhooks, and interactive API playgrounds. These resources support both technical and non-technical users. (Source)

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is designed for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It is valuable for modern software companies, enterprises, brands scaling across geographies, and organizations re-platforming from legacy solutions. (Source)

What industries are represented in Hygraph's customer case studies?

Industries include eCommerce, automotive, healthcare, consumer electronics, media and publishing, food and beverage, travel and hospitality, engineering, government, and SaaS. (Source)

Can you share specific customer success stories using Hygraph?

Yes. For example, Komax achieved 3X faster time to market and managed 20,000+ product variations across 40+ markets. Samsung saw a 15% increase in customer engagement. Sennheiser achieved a 136.7% increase in e-commerce conversions within 4 months. Stobag improved online revenue share from 15% to 70%. (Source)

What business impact can customers expect from using Hygraph?

Customers report up to 3X faster time-to-market, 20% increase in website monetization, 15% higher customer engagement, 7X higher content velocity, 125% traffic growth, and scalability across 40+ global markets. (Source)

Ease of Use & Implementation

How easy is it to get started with Hygraph?

Hygraph is recognized as the #1 easiest to implement headless CMS. Customers can start building for free with a developer account, and enterprise users can request a demo. The onboarding process includes introduction calls, account provisioning, business and technical kickoffs, and content schema planning. (Source)

How long does it take to implement Hygraph?

Implementation is fast. For example, Top Villas launched a new project with Hygraph in just 2 months. Si Vale's initial implementation phase also went smoothly, meeting aggressive deadlines. (Source)

What feedback have customers given about Hygraph's ease of use?

Customers praise Hygraph's intuitive editor UI, logical setup, and accessibility for non-technical users. The platform is described as super easy to set up and use, with streamlined workflows and positive sentiments from both technical and non-technical teams. (Source)

Support, Maintenance & Training

What customer service and support does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive SLAs with critical issue resolution in less than an hour, onboarding assistance, a dedicated Customer Success Manager, extensive documentation, a community Slack channel, Intercom chat, and training resources. (Source)

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph's cloud-based infrastructure handles all maintenance tasks, including server updates and security patches. Upgrades are automatic, and troubleshooting is supported by audit logs, monitoring, and performance reporting. Customers have access to 24/7 support and extensive documentation. (Source)

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

Hygraph offers onboarding support (introduction call, account provisioning, business/technical/content kickoffs), comprehensive documentation, regular training sessions, webinars, hands-on guidance, and consultation on content strategy and migrations. Technical support is available 24/7, with a community Slack channel and Intercom chat. (Source)

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure enhanced security and adherence to global standards. (Source)

What security features does Hygraph offer?

Hygraph provides granular permissions, audit logs, encryption at rest and in transit, SSO integrations, automatic backups, dedicated hosting, custom SLAs, IT security reviews, and penetration testing. Security incidents can be reported, and a compliance report is available. (Source)

Performance & Scalability

What should prospects know about Hygraph's product performance?

Hygraph leverages state-of-the-art caching and robust edge services for low latency and high read-throughput. Content delivery is optimized for rapid distribution, supporting 40+ global markets and 100+ stakeholders. Customers have reported 7X higher content velocity, 125% traffic growth, and 120% more website clicks. (Source)

Customer Proof & Sample Clients

Who are some of Hygraph's customers?

Sample customers include Sennheiser, HolidayCheck, Ancestry, JDE, Dr. Oetker, Ashley Furniture, Lindex, Hairhouse, Komax, Shure, Stobag, Burrow, G2I, Epic Games, Bandai Namco, Gamescom, Leo Vegas, Codecentric, Voi, and Clayton Homes. (Source)

Meet Hygraph AI Agents - Your Autonomous Teammates

React Hook Form - A Complete Guide

Depending on the use case, implementing React hook forms can be pretty complex. That's why we wrote this guide to help you get started.
Aagam Vadecha

Written by Aagam 

Sep 27, 2022
React hook form

#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.

A basic React Hook Form example showing a name input, a submit button, and the resulting JSON data object being displayed

#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>

A React Hook Form demonstrating built-in validation with a red error message appearing for an invalid email input

#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 integrated with AntD, showing a form with a checkbox and slider, and the resulting submitted JSON data

#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.

Side-by-side comparison of React Hook Form vs. a normal form, demonstrating how React Hook Form minimizes re-renders

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

React Hook Form performance benefit shown, with its Render Count at 4 compared to 58 for a Normal Form after user input

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>


  );
}

Advanced React Hook Form example showing real-time tracking of form state properties like 'isValid', 'isDirty', and 'isSubmitted

Advanced React Hook Form showing a conditional 'Experience' field and tracking 'isDirty' and 'isValid' form states

Blog Author

Aagam Vadecha

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.

Explore more blogs from Hygraph