Getting Started with React Hook Form (Part 1)

React Hook Form is a React Form Library that can be used to build Form for both Web Applications built with React and Hybrid Mobile Applications built with React-Native. It also helps to handle validation of forms with ease and it is easy to use. I am a React Developer and I have been using FORMIK to handle my forms and Yup for form validation but recently I discovered React Hook Form and I decided to check the docs and by checking one or two examples I developed interest in it and decided to use it on a CRUD App with authentication I built with React and Redux and I was really happy I used it because it gave me a nice developer experience.

This article about React Hook Form will be in 3 parts and this part will be on the advantages of React Hook Form and the new Changes in the new released version 7.

The purpose of this article is to tell you the power and strength of React Hook Form and to create more awareness of the relevance of the library and for some React Developers to check it out and see some cool things they can actually build with it.

Advantages of React Hook Form

1. Super Light⚡️

React Hook Form is a library without any other dependencies, it does not depends on any other library for validating inputs. It is performant and easy to use which requires us to write fewer lines of code compared to other validation libraries. This is one of my big reasons of using React Hook Form.

2. Accessibility (A11y)🚀

You might be surprised that what is A11y, A11y stands for accessibility. The phrase '11 characters'. Arrows are pointing to the first letter c and. The A11Y Project is a community-driven effort to make digital accessibility easier.

React Hook Form has support for native form validation, which lets you validate inputs with your own rules. Since most of us have to build forms with custom designs and layouts, it is our responsibility to make sure those are accessible (A11y) .

Infact code can be improved for accessibility and below is a comparison of two code snippet where one is not really accessible but the other one is very accessible, and the accessible example is an improved version of the one that is not accessible and it was done leveraging ARIA.

First Code Example;

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input id="name" {...register('name', { required: true, maxLength: 30 })} />
      {errors.name && errors.name.type === "required" && <span>This is required</span>}
      {errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
      <input type="submit" />
    </form>
  );
}

Improved Version and in this improved version aria-invalid and role = alert was used to make it very accessible to all kinds of users even people with disability.

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>

      {/* use aria-invalid to indicate field contain error */}
      <input
        id="name"
        aria-invalid={errors.name ? "true" : "false"}
        {...register('name', { required: true, maxLength: 30 })}
      />

      {/* use role="alert" to announce the error message */}
      {errors.name && errors.name.type === "required" && (
        <span role="alert">This is required</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span role="alert">Max length exceeded</span>
      )}

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

3. Performance🔥

Performance is one of the primary reasons why this library was created. React Hook Form relies on uncontrolled components, which is the reason why the register function capture ref. This approach reduces the amount of re-rendering that occurs due to a user typing in an input or other form values changing. Components mount to the page faster than controlled components because they have less overhead.

4. HTML Standards

Leverage existing HTML markup and validate your forms with React Hook Form constraint-based validation API.

5. DX (Developer Experience)

Intuitive, feature-complete API providing a seamless experience to developers when building forms.

6. Adoptable

Since form state is inherently local, it can be easily adopted without other dependencies.

And Finally;

7. Award

Winner of 2020 GitNation React OS Award for Productivity Booster.

The first time I tried to use React Hook Form I read an article on it and I tried to do what was explained in the article but things were not working fine so I decided to check React Hook Form website and I saw that a new version of the library has been released which is version 7 and a lot of improvement has been made to it which has made it more powerful and faster. So the new improvement added to the library are listed below;

What is new in React Hook Form Version 7?

1. Strictly typed form
2. Smaller Package Size (-13%).
3. More performant than ever.
4. New Resolver & DevTools.
5. API Refinements.
6. New custom hook useFormState.

These new features of React Hook Form version 7 makes it more powerful and interesting too use, more details and hands on experience with React Hook Form will be done in the next part of this great article.

Conclusion

Thanks for reading through this short article, this is just the first part of the React Hook Form series. The next part will be on creating a simple Sign up and Sign in Form with React Hook Form. Watch out for it and I believe that when we create a project with it we would understand it well and see the relevance of using this great React Library. Thanks😘