Top React Hooks — Async, Clipboard, and Cookie

Photo by SJ Baren 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-use

The react-use library is a big library with many handy hooks.

useAsyncRetry

The useAsyncRetry hook lets us run async cod with an addition rety method to let us retry or refresh the async function.

To use it, we run:

import React from "react";
import { useAsyncRetry } from "react-use";
export default function App() {
  const state = useAsyncRetry(async () => {
    const response = await fetch("https://api.agify.io/?name=michael");
    const result = await response.json();
    return result;
  }, []);
  return (
    <div>
      <button onClick={() => state.retry()}>load</button>
      {(() => {
        if (state.loading) {
          return <div>Loading...</div>;
        }
        if (state.error) {
          return <div>Error</div>;
        }
        return <div>{JSON.stringify(state.value)}</div>;
      })()}
    </div>
  );
}