Too many hooks in your functional component? Let’s find out if you have too many hooks, and if so, how do you fix it?

You have a functional component with 5, 10, 15 hooks? And you are wondering if it’s too much, maybe you have chosen the wrong tool for the job. A hammer instead of a drill. And perhaps the right tool is a class based component? Or something else? Redux!!?

Well before you throw out the baby (that’s your hooks I’m talking about), and reach for something else entirely, you can try some simple steps to convert your hooky mess into something more streamlined you can be proud to read and show your coworkers or friends.

The way to do this is with a custom hook. I’ll explain this now!

“Hooks” – Quick Recap

As a recap, hooks are the mechanism provided in React for making functional components do stuff. They let you add state and effects such as responding to lifecycle events and other changes. If you are unfamiliar with them, the official documentation is a great place to start.

“Custom Hooks” (spoiler: it’s just a function)

It turns out there isn’t much to Custom Hooks. It’s just a pattern. It’s a way of organising your code better. Organising your code better leads to easier to understand code which is a great thing for future you (and your team). Let’s think about your problem – you have a messy looking component with too many hooks. Most likely the majority of those hooks are useState or useEffect, but there might be others. Whatever you have that’s fine as a starting point. We’ll see how to use the Custom Hook pattern to make your code a little less messy.
 Creating a custom hook is a simple case of:

• Write a Javascript function that starts with the word use. E.g. useLogin
• In that function, do stuff with hooks like useState, useEffect or whatever else you need
• From the function, return just what is needed for your app to make use of this hook. Nothing more.

So how do you do this?

Let’s break down what you need to do into some small steps to make it easier to understand. If you know a lot of this already that’s fine you can skim through some of it, but I include it all here for those who are brand new to hooks and still getting your head around things.

Step 1 – Understand Custom Hooks by following the example

There is an excellent example of creating a custom hook on the React developer site: https://reactjs.org/docs/hooks-custom.html. Follow this now. Email me if you get stuck – I’d love to help people with code, and I’d hate to write a post where people got stuck and gave up.

Step 2 – Time Travel

I recommend you have a way to back up the code you have now so you can go back if you need to. Some people use git for this which is great, or if not you can just make a copy of all your code into another folder and put it to one side, which is absolutely fine for this exercise.

Because now you are going to combine some hooks into a custom hook, but you might change your mind after you do it and want to combine things a different way, and it is really useful to look back at how your code was before you started.

Step 3 – Pick a couple of hooks in your code to combine into a custom hook

Pick 2 or more hooks that seem to go together. If you did the exercise in step 1 you may have noticed that their useFriendStatus hook combined two hooks and both of those were to do with friend status. One was setting up the state for friend status, and the other was subscribing and unsubscribing to friend status API. 

That’s a great way to group up hooks to combine. The goal is to create a unit that make sense on it’s own. It should feel nice using the hook! You will get a feel for this with time, so don’t worry if you get it wrong now, just choose some hooks that you’d like to combine into a custom hook.

Step 4 – Create the custom hook.

Here are the steps:

1. Firstly pick a name for the hook starting with use. (It’s easy to change this later)
2. Now write the function, moving out the hooks code from your component to the custom hook function body.
3. Now replace the code inside your component to call the new custom hook.

How did that go? Did you get stuck? If you did please email me. (This will help me make this article a bit better if it isn’t clear enough.)

If it went well, hooray!

Making a custom hook is easy and hard at the same time. It’s easy to write the code – it’s just a function. But it can be really hard, even for experienced coders to know how to break up their code into custom hooks. However this is not a big problem because you can always change your mind later and rework your code a different way.

I’m a professional developer, and I’m yet to see anyone get code organized right the first time, it takes many revisits to the code to achieve this, and it will never be perfect. I always think of the goal to be improving the code, making it easier to understand than yesterday, but never aim for perfect. There are normally too many deadlines or new features required for that, even in your hobby projects!