Ben Edelstein Founder @LogRocket, formerly @Google.

Make React Fast Again [Part 3]: Highlighting Component Updates

2 min read 625

React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component mounts, deep component trees, and unnecessary render cycles can quickly add up to an app that feels slow.

Luckily there are lots of tools, some even built in to React, that help with diagnosing performance issues. In this series we’ll highlight tools and techniques for making React apps fast. Each post will also have an interactive, and (hopefully) fun demo!


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.

We made a custom demo for .
No really. Click here to check it out.

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.

LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can replay sessions with bugs or performance issues to quickly understand the root cause.

LogRocket instruments your app to record performance data, Redux actions/state, logs, errors, network requests/responses with headers + bodies, and browser metadata. It also records the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Conclusion

The highlighting feature in the React Developer Tools is an easy way to quickly see which components are updating as you interact with your app.

Since this only works locally, check out LogRocket, for diagnosing bugs and performance issues in production.

For more React performance tips, check out part 2 of this series:

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    Full visibility into production React apps

    Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

    LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

    The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

    Modernize how you debug your React apps — .

    Ben Edelstein Founder @LogRocket, formerly @Google.

    2 Replies to “Make React Fast Again [Part 3]: Highlighting Component Updates”

    Leave a Reply