React component performance

React has made it easy for web developers to quickly develop and deploy apps into production. However, as the app gets huge and you have many developers working on the same codebase, different patterns emerge. And as a result of this, slowly you will end up having performance issues on the website. These may not be immediately visible on the high-end laptops that we as web developers have the privilege to work on. But as the product grows its outreach into newer markets, and your users start using your web app with handheld devices, any performance issue can become a significant problem to the business revenue.

While trying to identify performance issues on my website, I often have to switch between Performance panel on Chrome DevTools and the React DevTools profiler. Once I identify the component having a perf issue with these previous tools, I often have to find out which props actually changed and the previous v/s new value of the culprit prop.

Here is one handy script that you can plug into your componentDidUpdate to identify the props causing re-renders for a particular component.

In the above code sandbox, click on the button to update the component state, and inspect the changing values on console.