Top React Hooks — State and Wait

Photo by Ryan Wallace 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-wait

The react-wait package lets us display something while we’re waiting for something to load.

We can install it by running:

yarn add react-wait

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Waiter } from "react-wait";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Waiter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Waiter>,
  rootElement
);

App.js

import React from "react";
import { useWait } from "react-wait";
export default function App() {
  const { isWaiting } = useWait();
  return (
    <div>
      {isWaiting("creating item") ? "Creating Item..." : "Nothing happens"}
    </div>
  );
}

We wrap our app with the Waiter component.