06 October 2020
React hooks best practices in 2021
Hooks have become a part of React relatively recently, but they already have a major impact on how developers solve various problems with state management and more. But to take full advantage of React hooks requires experience. But while there may be some truth to the saying “no pain, no gain”, it doesn’t mean that you have to be the one to suffer. Through my own experience with hooks, I was able to come up with a lot of React hooks best practices so that you can get it right from the start.
React.Component. Hooks made our code simpler, more concise and readable.
Getting rid of the classes made a lot of the boilerplate code disappear. For example, there is no longer a need to use the constructor and call super with props every time. There is also no need to bind methods or think about what this is at the moment.
When using hooks, it is worth remembering a few rules, so that the code works as expected and is understandable to others. In this article, I will tackle two of them –
React hooks best practices – the basics
I hope you already know this one, but I must mention it: Hooks cannot be called conditionally. You cannot put them in loops or nested functions inside your component.
So what to do if you want to call a hook conditionally? Just put the condition inside your hook.
Why is this so important? Hooks can be called multiple times in a given component and React operations are based on the order in which they are called. Not following this would introduce bugs to your application and fatal errors.
Fortunately, there is an eslint plugin created by React team which enforces you to follow this rule. It is called
eslint-plugin-react-hooks and you can find it on npm. If you use Create React App for your application, it is installed by default.
This plugin will work not only with React hooks but also with every custom hook. But for this to happen, you have to follow a specific convention – the hook name must start with
useState React hook used safely
As I mentioned before, when using React hooks (and generally in programming), it is worth sticking to well-known conventions. When naming values from useState, it is assumed that the elements are called:
By doing so, you will be able to easily find functions linked to the state they update and your code will be consistent across the application.
useState hook is great for storing the state for simple values such as booleans or form inputs. Unlike the state from classes, you are not limited to a single object. With
useState , you can (and you should) create separate values for each case.
For example, when working with form fields, instead of keeping user info in one state like this:
It’s better to create separate fields for each case:
Of course, there is no strict limit here and
useState can indeed store objects, but there is a thing you need to remember. In class components, when you update state using
this.setState, it is merged with the old one. With
useState, the update function replaces the old state with a new one; there is no merging at the end. Take a look at this example:
If you updated the state like this, you would lose all your previous data. Don’t worry, there is a way to handle it. Similar to the
this.setState class, instead of just passing new values, you can pass a function that receives the previous state. So you could do something like this:
Or you could do it with the spread operator:
One more important thing to note here. When you are updating values based on the previous state, you shouldn’t do it that way:
Do you know where the problem is? State updates work asynchronously, so you should never rely on the previous values in this manner. Instead, you should always use a function, even when not dealing with objects.
If this is a well-done tutorial for you
📚 There’s more. Grab a curated pack of code tutorials, DevOps advice, and development hacks from the Techkeeper’s Guide. One, short & sweet newsletter for the curious mind every two weeks.
useEffect is the one React hook to rule them all
useEffect hook allowed for logical separation of functionalities in the component, depending on what they do, instead of when they should occur. In the class, we had to keep unrelated functionalities in given lifecycle methods. With
useEffect, we can split our code into smaller chunks. And just like with
useState, you should not worry about calling
useEffect several times for each case.
When working with
useEffect, in most cases you want to include a dependencies list. Why? Let’s say you want to create a timer in your application. You call the
setInterval function inside
useEffect to update the timer variable every 1000 ms.
useEffect runs on every render. So when you update your component state inside
useEffect, state update triggers re-render. Then,
useEffect runs again, which updates the state and it goes infinitely. Or at least until your browser or API crashes. Luckily for us, the React team thought about it and added an
eslint rule, which reminds one of this. It is called
exhaustive-deps and it is included in
But in this case, dependency with a timer would not help, because you would still call
setInterval over and over again after the timer variable is updated. Of course, you could use
setTimeout instead of
setInterval, but there are 2 other things that can be done with
useEffect – to pass an empty array as a dependency or use a cleanup function.
If you pass an empty array as a dependency, it will tell React that this effect doesn’t depend on any value, so it will never run again.
Another thing you can do is to use a cleanup function, which is similar to
componentWillUnmount from the class component. Everything which is returned from function passed to
useEffect will be called when the component is removed. Moreover, if a component is rendered multiple times like in that case, the last effect is clean before the next is executed. Here you could simply return
clearInterval with the id of
React hooks best practices – summary
That’s it for this little React hooks tutorial. There is a lot more to cover about this topic, but I hope you found some useful tips for these two React hooks examples –
As you can see, hooks allow us to simplify components in our application by a lot. However, when using them, there are some gotcha parts that need to be considered. If you follow these guidelines, your app will be less prone to bugs and also more understandable for other developers.