Imagine you are working on your React application, you click a button or start typing on an input and you see a delay on the response, then you open the network tab and is not backend’s fault! Well, you are experiencing rendering performance issues. This scenario is not common at the early stages of development, however as time passes and the application evolves (more features are added, more libraries are used) rendering performance issues become a thing.
If is your first time trying to solve rendering performance issues on a React application this post post is for you. You will find useful tips on how to spot them and what to do to solve them.
Install React DevTools
Why the component re-rendered?
Record your actions
Spot slow or unnecessary re-renders
Memoization to the rescue!