Common solutions
We have seen how using the PureComponent
can help us to tell React when a subtree has to be rendered or not. If utilized in the right way, it could improve the performance of our applications a lot. It is also important to stress that is should be used only after the application has been monitored and the bottleneck has been found.
There are some tricky situations where extending the PureComponent
does not give the expected results; usually, the cause is that our props or state attributes are changing even if we think they are not. Sometimes it is not easy to figure out which props are causing the component to re-render or we do not know which components can be optimized with the PureComponent
.
Most of the time, refactoring the components and putting the state in the right place can greatly assist the optimization of the application.
In this section, we will look at some common tools and solutions to solve re-rendering issues, figuring out which components can be optimized...