My React component re-renders 5 times. Is this too many? What about 10 times or 20? When should I start optimizing?
How many re-renders is too many?
The number of re-renders is a poor performance metric. The long tree of React components that only return JSX can be re-rendered many times without any performance issues. On the other hand, one component performing a slow calculation on render can create a performance bottleneck on the very first mount.
When should I start optimizing?
It’s tempting to start optimizing unnecessary re-renders at the very beginning of the project. It may seem that if we won’t, the project will spiral out of control, and it would be extremely difficult to fix performance issues afterward. In practice, when we know how to detect and fix performance bottlenecks, we can do it as easily at later stages of development.
So a good strategy is to not micro-optimize re-renders prematurely and start fixing performance problems when they are evident. We can use Chrome DevTools CPU throttling to see how the app behaves on lower-end devices, which helps to spot actual performance issues earlier.
Using debugging tools
So when it comes to fixing performance problems, it’s helpful to wait until these problems are evident, then use debugging tools to identify the bottlenecks. There are two main tools in React ecosystem that allow us to do that 👇