Skip to content logo

Illustrated Notes

Building Custom React Hooks

Published or updated on November 02, 2019

Objects hanging off a series of hooks

You probably haven't heard, but React released a minor feature last year called "hooks".

It mostly flew under the radar, but I think it's pretty a useful addition and wanted to visually explain how it works.

Luckily Joe Previte was on my wavelength.

He's one of the instructors at egghead who put together a whole course on creating your own custom React hooks (next level!)

You can take a look at Shareable Custom Hooks in React if you're curious about building and publishing your own hooks on NPM.

Course illustration of a fishing hook with a react reel for Custom React Hooks

The course is great in and of itself... but I know why you're here – illustrations!

I diligently worked through Joe's material and turned a few of the highlights into illustrated notes.

The course doesn't cover much about the basics of hooks. So I added some TLDR explanations of what hooks do, including how everyone's faves useState and useEffect work. The notes are more of a primer than a comprehensive summary of what Joe dives into.

Here's the basics of hooks - hooks let you hold state and lifecycle events inside functional components instead of class components. Hooks follow two rules. First, only call hooks at the top of your function. Second, only use them inside React functions. Not plain JavaScript ones.

There are two main built-in hooks. First useState holds and updates your app's state

Second, useEffect handles "side effects," which are anything that causes changes outside of rendering your functional component to the DOM

For those already comfortable with hooks, you'll like the sections that cover the publishing pipeline – how to isolate your personal hooks, and prepare them for public use on NPM.

This course shows how to create useful, shareable hooks you can publish on NPM. You use the basic hooks like useState, useEffect, and useContext as the basic ingredients to cook up your own custom logic. You could create hooks like useBattery, useGeolocation, or useToggle. Making your own hooks is easier than you think.

Install the CLI tool create-react-hook. This creates a github repo for you and generates a boilerplate with name, description, and licence files. We can test our hook with react-testing-library before we publish.

If you're tossing around ideas for what to build, I'd recommend checking out collections like useHooks and Awesome React Hooks to get a sense of the possibilities.

I'll make sure to let you know if React changes anything else in the codebase. These things tend to get lost while the community is busy fawning over jQuery updates...

The Whole Illustrated Note

The full custom React hooks illustrated note

Want to learn more?

A high-res & printable version of the notes, plus the full course is avaliable here on the Shareable Custom Hooks in React page.