DEV Community

Cover image for Illustrated Notes on Custom React Hooks
Maggie Appleton for

Posted on

Illustrated Notes on Custom React Hooks


Illustrated notes on Joe Previtte's course on Building Custom React Hooks on egghead

The Basics of React Hooks

If you're not up to speed on React hooks, here's a very quick overview...

Hooks let us do more than just display static UI components. They give us the ability to hold state in our components, and use lifecycle events that can handle side effects and data changing over time.

We used to do this with class components, but the React library added hooks in early 2019 with version 16.8.




The Two Main Hooks

The React library comes with a set of "build in" hooks. There are 10 official hooks, but the two most common ones are useState and useEffect.

1. useState

useState lets us hold "state" – a piece of data that changes over time while your app is up and running.


2. useEffect

useEffect let's us perform side effects. That means we can execute functions or run code that isn't directly about rendering UI elements to the DOM.

This includes making data requests, or running JavaScript functions after the components have already rendered.


Creating Your Own Custom Hooks


We can also remix these built-in hooks to create custom hooks.

These are simply functions you write that use the basic hooks, and layer extra functionality on top of them.



There's a great collection on if you want to see some examples.

Once you've written your hook, there's a handy create-react-hook library that does all the formatting grunt work and makes uploading your hook to npm easy.

Just use npx create-react-hook, add a package name, description, Github details, and licence. There's a default template that works for most cases.


It'll generate a series of files and folders for you. You just need to add your hook file to the /src folder, write the readme, and take care of some other housekeeping.


After that you're all ready to publish your hook for others to use 🎉

Joe's course is nice and short, and covers all the details of how to do this.

You can get a handle on custom hooks in under 30 minutes. Then start writing your own!


👁‍🗨 If these are hard to read, you can download a free high-res PDF version on the course itself. limits image sizes a lot and it's hard to make it readable on here. Apologies!

Top comments (4)

good3n profile image
Tom Gooden✨

Love the illustrations

joachimzeelmaekers profile image
Joachim Zeelmaekers

Damn, those are amazing!

gsin11 profile image
Gurpreet Singh

Very well illustrated...!

davidyaonz profile image
David Yao

Amazing! Thanks for sharing.