Top React Hooks — Refs, Redux, and Async

Image for post
Image for post
Photo by Dan Gold 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.

reactive-react-redux

The reactive-react-redux library is an alternative library to React-Redux for using Redux stores in our React app.

To use it, we install it by running:

Then we can use it by writing:

We have our initialState constant with the initial state.

Our reducer is a Redux reducer.

The store is created with the createStore function from Redux to create our store from the reducer .

In the Counter component, we use the useTrackedState hook to get the state.

And we use the useDispatch hook to get the dispatch function to let us dispatch our action to the reducer.

Then in App , we use the Provider with the store prop set to our store to let us use it as a data store.

Provider , useTrackedState , and useDispatch are from reactive-react-redux.

We can also select values from a state and do more.

React-async-hook

React-async-hook is a library to help us make API calls easier.

To install it, we run;

or:

Then we can use it by writing:

We created the fetchName function to get our data.

Then we use the useAsync hook with it and the value to pass into the parameter to make the API call.

Then person has the loading , error , and result properties.

loading indicates whether the data is loading.

error indicates the error state.

result has the response body.

react-context-refs

The react-context-refs library lets us get React refs via a context.

We can install it by running:

Then we can use it by writing:

We pass in the hasError value to the useContextRef hook so that we can pass the returned value to the ref.

Image for post
Image for post
Photo by Mehrad Vosoughi on Unsplash

Conclusion

reactive-react-redux is an alternative for React-Redux.

React-async-hook lets us get data asynchronously.

react-context-refs lets us pass things to the ref via a context.

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