Top React Hooks — Fetch, Scroll, and Modals

Image for post
Image for post
Photo by Mark Rasmuson 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.

fetch-suspense

We can use the fetch-suspense package to do fetch and display a loading component while the data is loading.

To use it, we can install it by running:

or:

Then we can use it by writing:

index.js

App.js

We add the Suspense component to the root component with the fallback component in the fallback prop.

Then in App , we use the useFetch hook to fetch the data we want.

The response is returned in the function.

Modali

The Modali package is a library for creating a modal.

We install it by running:

Then we can use it by writing:

We use the useModali hook to return the props for the Modali.Modal component.

The toggleExampleModal function is used to toggle the opening of the modal.

moment-hooks

The moment-hooks library is a library that comes with various utility hooks that we can use.

We can install it with:

Then we can use it by writing:

We use the useOutsideClick hook by passing in the ref of the component that we want to check whether we clicked outside.

It also comes with the useArray hook to make handling state arrays easier.

We can use it to create a state array.

And we can use it to update the array with the functions returned by the hook.

For instance, we can write:

We have the actions object, which has array methods like push to add a new item to the array.

list has the array itself.

actions also has the removeIndex function to let us remove an item by its index.

The useLockBodyScroll hook disables scrolling on the body.

For instance, we can use it by writing:

We called the useLockBodyScroll hook with argument true to disable scrolling on the body.

Now we can’t scroll even if a list of items displayed that overflow the body.

Image for post
Image for post
Photo by cubicroot XYZ on Unsplash

Conclusion

fetch-suspense lets us the Suspense component while fetching data.

Modali is a hook for creating modals.

moment-hooks has many hooks that help us with various things.

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