Understanding Hooks Part 5 — Custom Hook

What’s behind the legendary Hooks? From time to time, I wonder.

Starting Part 4 the generic feature of a Hook is revealed. In this Part 5 we’d like to introduce a custom hook useAync to demonstrate how useState and useEffect can be served as the building blocks.

Say we want to fetch a call fn, wait for the data while loading without blocking the render.

The first time we render this piece, it’ll set initial value of data thanks to useState. Then we call useEffect to fetch api. While loading, "Welcome" is displayed. And after the api is fetched successfully, data is set again thus "You are here" is displayed. loading is flipped between true and false throughout the fetch.

Arguments

As you can see a custom hook can be used right away. What you have to be mindful is the input arguments. To remind us, useState ignores them after first update, useEffect takes them for all updates.

If the api depends on the choice you make, either from the prop or another state variable. In the useAsync implementation, we set [fn] as the useEffect dependencies. Which means if the api switches, the registered effect will run again with the new api. Also the loading will be triggered once again to true and false.

You can see, the custom hook’s arguments can be used for once or for all times. This is flexible, good or bad, just keep in mind.

Component

A hook, more often, is used to extend the functionality of component in generic way. You will find quite a few custom hooks inside Table , Form related libraries. In our case, let’s wrap useAsync into a Async component for reuse.

The children component is not rendered until data is resolved and provided properly. If you haven’t noticed yet, the hook, 99% of the time, is designed as a data layer.

The above useAsync code is only for study purpose. For production, please use something more bullet proof and versatile, ex. useSWR or useFetch.

TL;DR

The idea of custom hook is pretty simple, you have the atomic functionality provided by useState and useEffect. By putting them together you'll have more specific (or bigger) functionality.

Index

Front-end Engineer

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