Clean Up Your React Code With Custom Hooks

Clean up functional components with custom hooks.

Matthew Brown
Nov 2, 2020 · 4 min read
Made by the author in Canva

I have been building web and mobile applications in React for years and I am always on the lookout for better ways to build my apps. If you are building React applications using functional components and hooks there is a simple way to clean up your components by moving logic for setting state variables to custom hooks.

Typically in a React functional component codebase, you will see state variables that depend on either other state variables or props passed to the component. These are usually set by a hook that runs each time the dependency changes to update the value in the state. This works, but if you are doing this much it can really clutter up your functional components.

There is a cleaner way that involves moving the logic for setting and resetting these state variables into a custom hook. I will be walking through a quick example of how to do that in this article.

As I mentioned I have been building React applications for a long time and have noticed that as React codebases grow they can get pretty gnarly to maintain if aren’t intentional with the patterns you are following. There’s no right or wrong way, but I like to share what I see that works well and what doesn’t.

Functional component with useEffect

For the first example, we will create a simple component to demonstrate the typical way this is handled in functional components. Let’s say we have a component that takes in the list of users and counts the number of active users.

In this example, we create a state variable with useState for active user count and default the value to 0. The users' list is passed in as a prop and is passed as a dependency to useEffect. In useEffect we are using the current value for the users' list to count the number of users who have the active flag set to true.

This is a pretty simple example, but we can clean this up a bit to make the component more focused on presenting the information. Keep in mind how much of the code for this particular component is taken up with simply declaring a state variable and declaring how to calculate that value.

Custom hook with useMemo

Now we will clean this up with an example of a custom hook. We start by creating a new file to store the logic for counting the active users. Let’s create a file called useActiveUserCount.js and put the contents of our custom hook there.

This will look very similar to the logic we just had in the previous example we used to set the value of the hook. For the custom hook, we use useMemo to calculate the value for the active user count. This works very similarly to useEffect in that it takes the users' list array as a dependency and only re-runs when that reference to users changes. The difference is rather than having to set a state variable within like we did before useMemo returns a value. We collect that value in a variable and that is the result returned from our custom hook.

So this looks similar to what we had before, but we haven’t got to the beneficial part of this custom hook yet and that is how much it cleans up our ActiveUsers component. See the new version below.

Now that we have a custom hook to calculate the value for us we can discontinue using useEffect and useState in this cleaned-up version. The other benefit I have seen is that once you build a custom hook the logic usually doesn’t change much. That isn’t always the case, but for the most part, it is nice to have it out of the way in its own file and we don’t have to concern ourselves with it while we work on the ActiveUsers component.

That’s the basic idea behind building custom hooks in your React applications. This is a very simple demonstration, but I hope this demonstrates how this can help to clean up much more complicated code as well. Thanks for reading!

The Startup

Get smarter at building your thing. Join The Startup’s +785K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Matthew Brown

Written by

I am the Director of I.T. at IN10T. My passions include software development, anything technology related, and cars.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Matthew Brown

Written by

I am the Director of I.T. at IN10T. My passions include software development, anything technology related, and cars.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store