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:
React Developer Tools_Adds React debugging tools to the Chrome Developer Tools._chrome.google.com
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.
Redux TodoMVC Example_Now with extra bugs!_highlight-demo.firebaseapp.com
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.
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.
LogRocket | Logging and Session Replay for JavaScript Apps_LogRocket helps you understand problems affecting your users, so that you can get back to building great software._logrocket.com
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:
Make React Fast Again [Part 2]: why-did-you-update_React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component…_blog.logrocket.com
It’s tough to keep up-to-date on front-end dev. Join our weekly mailing list to learn about new tools, libraries and best practices that will help you build better apps: