Top React Hooks — Form, Layout, and Async

Photo by Elizeu Dias on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Hook Form

React Hook Form is a useful form library to let us add forms to a React app easily.

To install it, we run:

npm install react-hook-form

Then we can use it by writing:

import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} placeholder="first name" />
      <br />
      <input
        name="lastname"
        ref={register({ required: true })}
        placeholder="last name"
      />
      {errors.lastname && "last name is required."}
      <br />
      <input name="age" ref={register({ pattern: /\d+/ })} placeholder="age" />
      {errors.age && "age must be a number"}
      <br />
      <input type="submit" />
    </form>
  );
}