How to: React custom hook
Tags: react, hooks, customhook, hireme
Published: 2020-09-20 07:32:27

---
title: 
published: true
description: Another Hooks sales pitch, plus how to write your own custom hook. 
tags: React, Hooks, customhook, hireme
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Algeria_Sahara_Desert_Photo_From_Drone_5.jpg/1200px-Algeria_Sahara_Desert_Photo_From_Drone_5.jpg
---

Plenty of blog posts that focus on the fundamentals of implementing Hooks have already been written, so rather than add another one to the pile, I thought it might be a good idea to expand into some less-explored space. 

The first part of this post touches on the motivation for using Hooks in the first place. Following code-alongs is a great way to learn, but sometimes tutorials skimp when it comes to providing reasoning for doing things in a certain way, which, as a skeptical person, always makes me feel a little uneasy. 

So, I wrote the same component twice, once as a class, then as a function, and compared and contrasted them.

The second part is a tutorial on writing custom hooks to extract repetitious logic. 

I hope you find the content useful!

####Let's begin!
![Class component](https://dev-to-uploads.s3.amazonaws.com/i/1qchoz7nmvio7w698hw0.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jhyuoczy6rxqk3wffj4f.png)

### Why use hooks?

In a sentence, hooks save time and are clean.

Here's how:

####They reduce boilerplate
Compare the two components above which render identical DOM elements. Note how Function components require no constructor or render functions, and no `this`\* keyword (written 7 times in the Class component!) is required to bind `toggleMode()` or when calling methods to change `state`.

Unsure about `this`? Tyler McGinnis breaks it down very well [here](https://youtu.be/zE9iro4r918).

####They reduce decision-making overhead
Using only Function components reduces decision-making overhead simply because we never have to make a choice between Class and Function.

- Should this be a Function or Class component?
- Would refactoring this to a Class be a pain if I need to add state?
- Am I positive that it will always/never need state?

Prior to the release of the `useState` Hook, we had no choice but to use Classes for statefulness, but all of the questions above become moot once you've embraced the Function-Hook paradigm.

####They reduce refactoring
One of the more common implementation details that changes through the development cycle of React applications is the addition of state to a component. With Function-Hooks, you can immediately add state and skip the preliminary step of rewriting to Class.

###Reusing `useState` in a custom Hook
The second part of this post is a short tutorial on writing a custom hook. If you would like to follow along (suggested!), code is available [here](https://github.com/chefThomas/blog01), including starter code and solutions.

Another BIG advantage of Hooks is that they are _re-usable_, which helps us keep solutions nice and [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), another way to save time and keep code clean.

##### Example

Adding items to a shopping cart is a common usecase for state in ecommerce applications.

Take a moment to review code for the `FruitStand` component below, and we'll resume underneath when you're done.
![Fruit Stand UI](https://dev-to-uploads.s3.amazonaws.com/i/cg06an6a3cqs5s7h1tqy.png)

![Fruit Stand Component](https://dev-to-uploads.s3.amazonaws.com/i/rzm41dqsjn1emhlqg2w3.png)

If the repeated increment logic smells a little off 💩, that's a good sign! This is the redundant code that we will extract into a single custom Hook, `useIncrement`.

![custom hook, useIncrement](https://dev-to-uploads.s3.amazonaws.com/i/k50p1w07i14hp36riwpj.png)

A couple of details to note:

- Because there is no JSX, there is no need to import React.
- State and the function that changes it, `increment()`, are returned by the hook in an array and accessed by destructuring in the familiar `[foo, setFoo] = useHook(<initial value>)` pattern

####Reformatting FruitStand
Reformatting the component is very straightforward.

- Import `useIncrement`
- Remove the `useState` import
- Implement `useIncrement` for both fruit types at the top of the component.
- delete the redundant `incrementApples` and `incrementOranges` functions
- re-assign add button `onClick` to the state-setting functions of `useIncrement` for apples and oranges.

Here's the finished product
![reformatted fruit stand component](https://dev-to-uploads.s3.amazonaws.com/i/v2pen6y4pd5k8cow7jkg.png)

#### Challenge!

Implement a decrement function for apples and oranges, using a Hook called `useDecrement`. No negative values allowed 😀

####Conclusion
This single component example is very simple, so the benefits of `useIncrement` might not be obvious, but I'm sure you can imagine a situation in the real world where extracting repeated logic would be beneficial.

I hope I've made a strong case that Function components with `useState` have the potential to decrease development time in multiple ways, and provide a much cleaner and readable way to write stateful components.