Top React Hooks — State and Wait

Image for post
Image for post
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:

Then we can use it by writing:

index.js

App.js

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

App.js

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:

Then we can write:

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:

Then we can use it by writing:

index.js

App.js

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.

Image for post
Image for post
Photo by Alvan Nee on Unsplash

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 .

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store