Top React Hooks — State and Wait
--
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…