We have seen how using PureComponent can help us to tell React whether 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 it should be used only after the application has been monitored and the bottleneck has been found.

There are some tricky situations where extending 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 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. We will also look at how to refactor complex components into small ones to achieve better performance.