5 Ways to Stop Wasting Renders in React/Redux
This article assumes that the reader already has a basic understanding of React/Redux. If it’s not the case, I recommend you to take a look at the Github pages of React and Redux. It’ll change your life!
We often hear that premature optimization is the root of all evil. Regardless of your opinion on the matter, we can all agree that it’s no reason to ship inefficient code in production!
While learning React/Redux, I noticed some of my components were rendering many times, without any clear reasons. This kind of situation is generally no big deal but as an application grows, performance can become a concern. No matter if you’re here to get out of a render trap or if you simply want to learn new things, here’s 5 tips that will hopefully save you a couple of renders:
1) Integrate why-did-you-update to your dev tools
One really useful tool to deal with this kind of things is why-did-you-update. In short, it’s a function that logs potentially avoidable renders in the console (no change in props/state, etc.):
But I have to warn you, you may have to swallow your developer's pride when you’re gonna realize your code is not as efficient as you say it is!
2) Use PureComponent instead of Component
This one is pretty straightforward, but not necessarily obvious for those who are new to the React/Redux world. First, you must know the difference between these two.
Roughly, a PureComponent is the same as a Component, with the exception that it handles the shouldComponentUpdate for you. When props or state change, a PureComponent will do a shallow compare of his actual and future values, then re-render if there’s a difference. On the other hand, a Component, will re-render by default when shouldComponentUpdate is called, even if props and state stay the same.
So, if you don’t want to implement shouldComponentUpdate on your own, I recommend you to stick with PureComponent.
3) Use shouldComponentUpdate
Inside a Component, React provides to you a lifecycle method called shouldComponentUpdate. This method gives you the opportunity to decide under which conditions a Component will re-render. It’s super easy to implement and can really boost your app’s performance!
4) Use handle functions
When we pass a function in props to a component, you can pass a handle function or an inline function:
At first glance, both look pretty similar but the difference happens inside shouldComponentUpdate. Let’s take a look at this strict comparison between two javascript objects:
In JavaScript, functions are first-class objects and what distinguishes them from other objects is that they can be called. So yeah, we end up with basically the same behavior using functions:
When a function is passed to a component, it will receive a “new” function every time the parent component is rendered. With that being said, you should probably use handle functions, even for one-liner!
5) Use selectors rather than bloating mapStateToProps
Instead of doing Object.values() in the mapStateToProps method to transform a keyed object from the Redux store to an array, you should take a look at selectors. A selector is not recomputed unless one of its arguments changes, avoiding useless render caused by strict comparisons. I really recommend reselect, which is probably the best selector library for Redux.
Conclusion
In my opinion, the most important thing to remember when dealing with optimization is to use common sense. Sometimes less is more, and it’s something you definitely don’t want to overdo !
