Illustrated Notes on Custom React Hooks
Tags: react, hooks, javascript, illustrated
Published: 2020-11-20 10:21:09

---
title: Illustrated Notes on Custom React Hooks
published: true
description: Illustrated notes on how to create and publish your own custom React hooks
tags: react, hooks, javascript, illustrated
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ckxk1dj1531gd698l9ym.png
--- 

![CustomHooks_DevTo_1](https://dev-to-uploads.s3.amazonaws.com/i/k3hxrcz468zgpl7r2hj7.png)


Illustrated notes on [Joe Previtte](https://joeprevite.com/)'s course on [Building Custom React Hooks](http://bit.ly/3av6FvK) on egghead

---

## The Basics of React Hooks
If you're not up to speed on [React hooks](https://reactjs.org/docs/hooks-intro.html), 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](16.8), but the React library added hooks in early 2019 with version 16.8.

![CustomHooks_DevTo_2](https://dev-to-uploads.s3.amazonaws.com/i/u637kljxekttuoed30dq.png)
  
![CustomHooks_DevTo_3](https://dev-to-uploads.s3.amazonaws.com/i/uz0vu063711wgpzpffne.png)

---


![CustomHooks_DevTo_4](https://dev-to-uploads.s3.amazonaws.com/i/dghhearnqki9yu18gukg.png)

## The Two Main Hooks

The React library comes with a set of "build in" hooks. There are [10 official hooks](https://reactjs.org/docs/hooks-reference.html), 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.

![CustomHooks_DevTo_5](https://dev-to-uploads.s3.amazonaws.com/i/1cg6qoks3qe0h8godqp9.png)

### 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.

![CustomHooks_DevTo_6](https://dev-to-uploads.s3.amazonaws.com/i/bwmt1hiwak5zjf0g3r0e.png)
![CustomHooks_DevTo_7](https://dev-to-uploads.s3.amazonaws.com/i/ps7c22vykz9vx7rri0zh.png)

---

## Creating Your Own Custom Hooks

![CustomHooks_DevTo_8](https://dev-to-uploads.s3.amazonaws.com/i/6nbj4uaeodmb9hjrpty8.png)

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.

![CustomHooks_DevTo_9](https://dev-to-uploads.s3.amazonaws.com/i/iukemhqs64t9inmw11iw.png)
 

---

![CustomHooks_DevTo_10](https://dev-to-uploads.s3.amazonaws.com/i/ql2g96fk789kp79a3ul2.png)

There's a great collection on [usehooks.com](https://usehooks.com/) if you want to see some examples.

Once you've written your hook, there's a handy [create-react-hook](https://www.npmjs.com/package/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.

![CustomHooks_DevTo_11](https://dev-to-uploads.s3.amazonaws.com/i/kw9i35z619p9b48aphu8.png)

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.

![CustomHooks_DevTo_12](https://dev-to-uploads.s3.amazonaws.com/i/8xt2nb36nxtsj2h0a58b.png)
    
After that you're all ready to publish your hook for others to use 🎉

---
   
[Joe's course](http://bit.ly/3av6FvK) 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!

![shareable-custom-hooks-in-react](https://dev-to-uploads.s3.amazonaws.com/i/3o7ynn3shq7egu3gpe9x.png)

---
 
👁‍🗨 If these are hard to read, you can download a free high-res PDF version [on the course itself](http://bit.ly/3av6FvK).
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!