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 usehooks.com 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.
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!