Top React Hooks — Form, Layout, and Async

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>
  );
}

We create our form with the inputs.

And we use the useForm hook to return some functions and objects we cause.

register lets us register our input so that we can use React Hook Form to do validation and handle input values.

errors has the errors for each field.

handleSubmit is a function that lets us handle submissions.

It takes a callback which we create to get the form data and do something with it.

The data parameter in onSubmit has the inputted data.

The register function takes an object with the pattern and required properties.

pattern has the validation pattern.

required indicates whether the field is required.

react-hook-layout

The react-hook-layout library lets us create layouts with a hook.

To install it, we can run:

npm install react-hook-layout

or:

yarn add react-hook-layout

Then we can use it by writing:

import React from "react";
import { defineSlots, useLayout } from "react-hook-layout";

export default function App() {
  const { Content, Footer, Header, SidebarLeft, SidebarRight } = defineSlots(
    "Content",
    "Footer",
    "Header",
    "SidebarLeft",
    "SidebarRight"
  );

  const Layout = useLayout();

  return (
    <Layout>
      <Content>content</Content>
      <Footer>footer</Footer>
      <Header>header</Header>
      <SidebarLeft>left</SidebarLeft>
      <SidebarRight>right</SidebarRight>
    </Layout>
  );
}

We use the defineSlots function to create our slots for the layout.

The arguments are the slot component names.

Then we can use the useLayout hook to create the Layout component to wrap around the slots.

react-hooks-async

The react-hooks-async library lets us make HTTP requests easily.

To install it, we run:

npm install react-hooks-async

Then we can use it by writing:

import React from "react";
import { useAsyncTask, useAsyncRun } from "react-hooks-async";

const fetchName = async ({ signal }, name) => {
  const response = await fetch(`https://api.agify.io/?name=${name}/`, {
    signal
  });
  const data = await response.json();
  return data;
};
export default function App() {
  const task = useAsyncTask(fetchName);
  useAsyncRun(task, "michael");
  const { pending, error, result, abort } = task;

  return (
    <>
      <p>{JSON.stringify(pending)}</p>
      <p>{JSON.stringify(error)}</p>
      <p>{JSON.stringify(abort)}</p>
      <p>{JSON.stringify(result)}</p>
    </>
  );
}

We created the fetchName function which takes an object with the signal property and parameters we pass in.

signal is the abort signal.

name is the parameter we want to pass in.

It returns a promise which resolves to the response data.

Then we can use the useAsyncTask hook with the fetchName function to return the task object.

We use this with the useAsyncRun hook with the argument we want to pass in.

Then task object has the pending , error , result , and abort properties.

pending indicates whether the result is pending.

error has any errors which come up.

result has the response body.

abort has the abort signal.

Conclusion

React Hook Form lets us create forms easily.

react-hook-layout lets us create layouts.

The react-hooks-async library lets us run async code with ease.