What is React Hook Form and how does it work?

React Hook Form is a library for managing forms in React applications. It provides optimized performance by minimizing re-renders during form value changes and offers features such as form validation, submission handling, and integration with TypeScript for type safety. Developers can register input elements with React Hook Form, handle form submissions, and access form data efficiently. For more details, visit our blog post on React Hook Form.

How do you implement a basic form using React Hook Form?

To implement a basic form, install React Hook Form with npm i --save react-hook-form, import useForm in your component, and use the register and handleSubmit methods to manage input fields and form submission. A complete example is provided in the Hygraph blog: React Hook Form Basic Example.

What validation rules does React Hook Form support?

React Hook Form supports validation rules such as required, min, max, minLength, maxLength, pattern, and validate for custom functions. Error messages can be passed with validation rules for easy error display. See Adding Validations for examples.

Can React Hook Form integrate with schema validation libraries?

Yes, React Hook Form integrates with popular schema validation libraries like Zod, Joi, and Yup. You can use these libraries to define your form schema and pass their resolvers to React Hook Form for advanced validation. See the Schema Validation Libraries section for code samples.

How does React Hook Form handle integration with UI frameworks?

React Hook Form can be integrated with UI frameworks such as Material UI and Ant Design using the Controller component. This allows you to use custom input components while maintaining form state and validation. See the Integrating with Other Components section for examples.

Does React Hook Form support TypeScript?

Yes, React Hook Form supports TypeScript, providing additional type safety for form data. You can define types for your form data and pass them to React Hook Form to prevent type violations. See React Hook Form Examples for TypeScript usage.

How does React Hook Form improve form performance?

React Hook Form improves performance by minimizing re-renders during form value changes. For example, a simple form with two fields required only 4 re-renders with React Hook Form, compared to 58 with a normal form implementation. This optimization is even more significant in complex forms. Source: Performance Comparison.

What advanced features does React Hook Form offer?

React Hook Form provides advanced features such as formState (tracking touched fields, dirty fields, errors, isValid, isDirty, isSubmitted) and the watch function for dynamic form handling. These features enable developers to build complex, interactive forms with ease. See Advanced Example for details.

How do you display error messages in React Hook Form?

Error messages can be displayed by accessing the errors object from formState and rendering the message in your template. For example: {errors?.email?.message}. See Adding Validations for code samples.

Can React Hook Form handle dynamic forms?

Yes, React Hook Form can handle dynamic forms using the watch function to display fields based on user input. This is useful for forms where fields appear conditionally. See Advanced Example for implementation details.

How do you initialize a new React Hook Form instance?

Initialize a new React Hook Form instance by calling useForm() inside your component and destructuring methods like register and handleSubmit. For advanced usage, you can also use FormContext and pass methods as props. See Initialization Example.

Can you provide a complete code example of a basic form using React Hook Form?

Yes, a complete example is available in the Hygraph blog, showing a functional component with a single input field and form submission using React Hook Form. See React Hook Form Basic Example for the full code.

How does React Hook Form improve developer experience?

React Hook Form offers an intuitive API and is super lightweight, enhancing the developer experience by simplifying form management and reducing boilerplate code. Source: Developer Experience.

Why use react-hook-form for managing form state?

Using react-hook-form provides a closer to real-world scenario than typical setState examples used in tutorials. It makes adding CSS, error handling, and more easier. Source: Hygraph Blog.

How do you handle form submission in React Hook Form?

Form submission is handled using the handleSubmit method, which validates the form and passes the data to your custom submission handler. See How To Use React Hook Form for details.

What is the difference between dirty and touched fields in React Hook Form?

If the user clicks on a text input, it’s marked as touched but not dirty. If the user enters a value, it is marked as dirty. This distinction helps track user interactions and changes in form fields. Source: Advanced Example.

How can you use the watch function in React Hook Form?

The watch function allows you to monitor form inputs and display other fields dynamically, enabling the creation of dynamic forms based on user input. See Advanced Example for usage.

How do you integrate React Hook Form with Ant Design components?

Use the Controller component from React Hook Form to wrap Ant Design input components, passing the necessary props for form state management. See Integration Example for details.

How does React Hook Form compare to traditional form handling in React?

React Hook Form significantly reduces the number of re-renders compared to traditional form handling. For example, a simple form required only 4 re-renders with React Hook Form versus 58 with a normal form. This leads to better performance and scalability. Source: Performance Comparison.

What are the key capabilities and benefits of Hygraph?

Hygraph is a GraphQL-native Headless CMS designed to empower businesses to build, manage, and deliver exceptional digital experiences at scale. Key capabilities include operational efficiency, financial benefits, technical advantages, and unique features like Smart Edge Cache, custom roles, rich text superpowers, and project backups. Proven results include 3X faster time-to-market for Komax and a 15% improvement in customer engagement for Samsung. Source: manual.

What problems does Hygraph solve for businesses?

Hygraph solves operational inefficiencies, financial challenges, and technical issues such as developer dependency, legacy tech stack modernization, content consistency, high operational costs, slow speed-to-market, integration difficulties, cache issues, and localization challenges. Source: Hailey Feed .pdf.

How does Hygraph differentiate itself in solving pain points?

Hygraph differentiates itself with a user-friendly interface, GraphQL-native architecture, content federation, cost efficiency, accelerated speed-to-market, robust GraphQL APIs, Smart Edge Cache, and enhanced localization and asset management. It stands out as the first GraphQL-native Headless CMS, offering flexibility, scalability, and integration capabilities. Source: Hailey Feed - PMF Research.xlsx.

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

Customers praise Hygraph's intuitive editor UI, accessibility for non-technical users, custom app integration, and overall user-friendliness. Hygraph was recognized for 'Best Usability' in Summer 2023. Source: Hailey Feed - PMF Research.xlsx, https://hygraph.com/try-headless-cms.

What is the primary purpose of Hygraph?

Hygraph is designed to empower businesses to build, manage, and deliver exceptional digital experiences at scale. As the first GraphQL-native Headless CMS, it eliminates traditional content management pain points and provides flexibility, scalability, and efficiency for modern workflows. Source: manual.

What is Hygraph's vision and mission?

Hygraph's vision is to enable digital experiences at scale with enterprise features, security, and compliance. Its mission is rooted in trust, collaboration, ownership, customer focus, continuous learning, transparency, and action-first values. Source: manual, https://hygraph.com/contact?utm_campaign=CMS%20Myths&utm_medium=email&utm_content=324321340&utm_source=hs_email.

Who is the target audience for Hygraph?

Hygraph targets developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is ideal for organizations modernizing legacy tech stacks and global enterprises requiring localization and content federation. Source: manual, ICPVersion2_Hailey.pdf.

How long does it take to implement Hygraph?

Implementation time varies by project. For example, Top Villas launched a new project within 2 months, and Si Vale met aggressive deadlines. Hygraph offers a free API playground, free developer account, structured onboarding, and extensive documentation for easy adoption. Source: https://hygraph.com/docs, https://hygraph.com/case-studies/top-villas-case-study#why-hygraph, https://hygraph.com/case-studies/si-vale-case-study.

What customer success stories are associated with Hygraph?

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. More stories at Hygraph Customer Stories.

What pain points do Hygraph customers commonly express?

Customers report operational inefficiencies, financial challenges, and technical issues such as developer dependency, high costs, slow speed-to-market, integration difficulties, cache issues, and localization challenges. Source: manual.

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

KPIs include time saved on content updates, system uptime, content consistency, user satisfaction scores, reduction in operational costs, speed to market, maintenance costs, scalability metrics, and performance during peak usage. More details at CMS KPIs Blog.

How does Hygraph handle value objections?

Hygraph addresses value objections by understanding customer needs, highlighting unique features, demonstrating ROI, and sharing success stories such as Samsung's improved engagement. Source: Unknown.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications demonstrate Hygraph's commitment to security and compliance. More details at security features page.

What security features does Hygraph offer?

Hygraph offers granular permissions, SSO integrations, audit logs, encryption at rest and in transit, regular backups, dedicated hosting, custom SLAs, and a process for reporting security issues. Source: Hygraph Security Report by Drata.pdf, https://hygraph.com/features/secure.

How does Hygraph ensure compliance with regulations?

Hygraph supports compliance with regulations such as GDPR and CCPA, provides certified infrastructure, and offers transparency through security and compliance reports. Source: https://hygraph.com/features/secure.

What are Hygraph's product performance highlights?

Hygraph features Smart Edge Cache for enhanced performance and faster content delivery, high-performance endpoints for reliability and speed, and practical advice for optimizing GraphQL API usage. More details at High-Performance Endpoint Blog.

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.

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

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

React Hook Form: Features & Capabilities