Implementing React-Hook-Form in ReactJS

A light, performant, and simple way to manage form data in ReactJS

https://react-hook-form.com

The React Hook Form is an NPM package for ReactJS that helps simplify the management of form data as well as increasing code performance by reducing the number of re-renders. The package is being steadily supported by developers and has a large base of users, which makes finding helpful documentation and tutorials easy. I’m going to walk you through a simple implementation of React Hook Form to show just how useful this package is.

Let’s examine 3 ways to manage form data in ReactJS

We want to create a sign-up form with multiple input fields that are submitted when a button is clicked. The 3rd example will implement React Hook Form.

Here is the GitHub repo for all of the examples below.

1. The old way, using a React class component. We simply create a state object that holds the current value of each input field and then submit the current state when the form is submitted. The form input values can then be controlled in the elegantly simple handleChange method:

2. We could use a functional component without a form hook. We would create several instances of the useState hook and set the value of each separate input field to its corresponding useState instance. We would also have to create a separate onChange method for each input field (which is definitely not a very DRY solution).

3. We can implement the React Hook Form in a functional component. First, we need to install the package via NPM:

npm install react-hook-form

Next, we import useForm from ‘react-hook-form’. We can go ahead and remove all of the name, value, and onChange attributes from the Signup component. Our now uncontrolled component will be registered into the form hook, and its values will be available for validations and submission. It is important that every input field has a unique name, as this will be used as the key for the registration process.

React Hook Form also provides its own handleSubmit method. We will pass our custom onSubmit method as an argument to handleSubmit within the onSubmit attribute in the form element. The form data will be available to us as data that we will use in our onSubmit function. Let’s take a look at what we have so far:

Not only is this way much more simple, it is actually more performant as well. By embracing the hook's uncontrolled form, the amount of re-renders is drastically reduced. Rather than re-rendering with every single keyboard change/input, the component only re-renders when moving from one input field to another.

Adding Validations and Error Handling

The React Hook Form also embraces standard HTML form validations and allows you to access them in a simple manner. We are able to add validations in an object passed in as an argument to the register function. Error handling is a breeze as well. By destructuring the errors from formState in our useForm hook instance, we will have access to errors in every input field. Let’s take a look at how we can add some validations and error handling to our existing Signup component:

Conclusion

This is just scraping the tip of the iceberg, but hopefully, I have demonstrated the usefulness of the React Hook Form. The developer behind it has created great documentation and I highly recommend you learn more about what else you can do with this amazing package!

Home

Thanks for reading! Feel free to connect with me on LinkedIn.