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.

This way, we can call useWait hook to return an object with the isWaiting method.

Then we can call isWaiting to show different things depending on whether the app is busy or not.

We can control the busy state with other functions.

For instance, we can write:

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, Waiter } from "react-wait";
export default function App() {
  const { startWaiting, endWaiting, isWaiting, Wait } = useWait();
  return (
    <button…