Unnecessary Render Cycles [continued]

In my last post, I discussed how unnecessary render cycles can negatively affect performance in React apps. However, in a large-scale app, it can be tricky to know which components are updating at any point in time.

Highlight updates with the React Developer Tools

Luckily, the React Developer Tools Chrome extension has a built in feature for visualizing component updates. To use it, first make sure to install the extension here:

Then, open the extension by clicking the “React” tab in the Chrome devtools and check “Highlight Updates”.

Then, simply use your app. Interact with various components and watch the devtools work its magic.

Understanding the output

The React Developer Tools highlights components that are re-rendering at a given point in time. Depending on the frequency of updates, a different color is used. Blue shows infrequent updates, ranging to green, yellow, and red for components that update frequently.

Seeing yellow or red isn’t necessarily a bad thing. It would be expected when adjusting a slider, or other UI element that triggers frequent updates. But if you click a simple button and see red- it may mean that something is awry. The purpose of the tool is to spot components that are updating unnecessarily. As the app developer, you should have a general idea which components should be updating at a given time.

Demo!

To demonstrate the component highlighting, I rigged the TodoMVC app to update some components unnecessarily.

Open the link above, and then open the React Developer Tools and enable update highlighting. When you type in the top text input, you’ll see all of the TODOs highlight unnecessarily. As you type faster, you’ll see the color change to indicate more frequent updates.

Debugging Performance Issues in Production

The React Developer Tools only work if you are running your app on your own machine. If you’re interested in understanding performance issues that users see in production, try LogRocket.