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 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
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
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!