React- Your First Custom Hook

Photo by Chris Scott on Unsplash

React 16.8.0 introduces Hooks. Take notice that this is not React 17.0.0 because hooks can seamlessly integrate into your react code ,meaning they won’t break your existing code. React provides a bunch of hooks and you can read about them here in their amazing documentation.

However, there’s more…

Not only can you use the Hooks React provides, but you can also build your OWN hooks on top of them.

If you’ve gotten your hands dirty with hooks, this article will set you up for creating your own custom hooks with a solid foundation.

Prerequisites:

1. You should be familiar with react
2. You should be familiar with React hooks
3. You should like functions more than classes in Javascript

When to use Hooks?

We all know hooks were introduced to have stateful stuff in functional components. And so, in most of the cases you can convert your class components into functional components.

But what if we stop thinking about Hooks like that…

What if we see hooks as a way of programming, as a tool that allows us to separate our logic from the UI such that we can reuse it in other places of our application as well.

And as an ADDED benefit, you have access to the state of the component so react can do all those fancy updates if there is a change in the state.

When to use Custom Hooks?

Lets see some code..

React component knowing more than it should

This is a very simple React <Form/> component using the useState() hook.

1. It has an <input/> for the user to enter their password
2. It has an onChange() event there to see if the password is valid
3. If the password is valid, we display it to the user

Granted, this is not a real form. It doesn’t even have a button to submit :D
However, we must start small when learning something new.

Coming back to our example, do you see the need to use custom hooks here? I sure as hell didn’t when I first saw this.

As I mentioned before, see hooks as a tool to separate your logic from your UI.

Keeping that in mind, the onChange() method in the <Form/> component, contains the logic of validating a password.
The <Form/> component knows too much about the way passwords are dealt with.

Whenever you see a component knowing more than it should, it should a sign that you might need to refactor it.

Let’s take the validation logic out of the <Form/> component.

Custom hooks in action

When I first saw something like this, it took me around 15 minutes to understand what’s really happening here. Lucky for you, you’ll gonna understand this in way less.

So here’s what happened:

1. We create a customHook called useSmartPassword() (14)
2. We make our customHook stateful by using React’s useState() hook (15)
3. We define a function, that we will later expose, containing our logic (17)
4. This logic takes in some input from the outside and updates the customHook’s state (21)
5. Finally, we expose the customHooks’s state and our logic function that alters that state (24)

Still confused?

Whenever you write a custom hook, you must return an array with two elements. In other languages it’s called a Tuple.

This tuple must contain the currentValue and a function that updates it . Something like:

[currentValue, setCurrentValue] = customHook();

The updater function setCurrentValue(), should accept argument(s). This argument can be the updated state or some other value/function. If you choose to send some other value/function, you let the updater function update the currentValue according to its own logic. This is what we have done in the above example.

Remember, whenever you call the updater function setCurrentValue(), you are updating the state of the component. Just like this.setState() . Thus, the component will re-render with our latest state.

The full code can be seen in the following sandbox:

Working example using custom hooks

Conclusion

What I want you to take away from this article is that hooks let you extract logic and use it across your application if necessary. Since these hooks let you use the React’s state, you can let React worry about updating the components, while you can write cleaner and scalable code.

As a plus, you don’t have to use classes any more ever again.
Let’s not say ever again but you get it.