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
      onClick={() => startWaiting("creating")}
      disabled={isWaiting("creating")}
    >
      <Wait on="creating" fallback={<div>Creating!</div>}>
        Create
      </Wait>
    </button>
  );
}

We call the useWait hook and get more properties in the returned object.

startWaiting lets us turn on the busy state.

The string identifies what it’s doing.

isWaiting indicates whether the 'creating' busy state is on.

We have the Wait component with the on prop to watch for the creating busy state.

fallback has the items to load when it’s busy.

react-window-communication-hook

The react-window-communication-hook package lets us create a communication channel without our component.

We can install it by running:

npm i react-window-communication-hook

Then we can write:

import React from "react";
import useBrowserContextCommunication from "react-window-communication-hook";

export default function App() {
  const [communicationState, postMessage] = useBrowserContextCommunication(
    "channel"
  );

  const [status, setStatus] = React.useState("on");

  function turnOff() {
    setStatus("off");
    postMessage("off");
  }

  const isOff = [communicationState.lastMessage, status].includes("off");

  return (
    <div className="App">
      <h1>{isOff ? "off" : "on"}</h1>
      <button onClick={turnOff}>turn off</button>
    </div>
  );
}

We imported the useBrowserContextCommunication hook to return the communicateState and postMessage variables.

communicationState has the communication state.

It has the lastMessage with the last message that was sent with postMessage .

postMessage is a function that lets us send a message.

reaktion

The reaktion package provides us with a gook that uses the same API has useState .

To install it, we can run:

yarn add reaktion

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Reaktion } from "reaktion";

import App from "./App";

const rootElement = document.getElementById("root");

const initialState = { name: "mary" };

ReactDOM.render(
  <Reaktion initialState={initialState}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Reaktion>,
  rootElement
);

App.js

import React from "react";
import { useStore } from "reaktion";

export default function App() {
  const [name, setName] = useStore("name");

  return <button onClick={() => setName("james")}>Hello {name}</button>;
}

We wrap the Reaktion component around our App so that we can use the useStore hook in our app.

initialState has the initial state.

It takes the property of the state we want to get and set.

The array has name and setName , which is the value and the function to set the value respectively.

Conclusion

react-wait lets us display something when our app is busy.

react-window-communication-hook lets us communicate within a component.

reaktion lets us set states similar to useState .