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!
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.
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.
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.
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.
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.
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:
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
Learn more →
2 Replies to "Make React Fast Again [Part 3]: Highlighting Component Updates"
Highlights Updates option is not available anymore in the React Developer Tools extension.
It is, just click in the settings button.