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 , 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. last post 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: _Adds React debugging tools to the Chrome Developer Tools._chrome.google.com React Developer Tools 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 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 . As the app developer, you should have a general idea which components should be updating at a given time. necessarily unnecessarily Demo! To demonstrate the component highlighting, I rigged the TodoMVC app to update some components unnecessarily. _Now with extra bugs!_highlight-demo.firebaseapp.com Redux TodoMVC Example 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 is like a DVR for web apps, recording 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 literally everything 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 helps you understand problems affecting your users, so that you can get back to building great software._logrocket.com LogRocket | Logging and Session Replay for JavaScript 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 , for diagnosing bugs and performance issues in production. LogRocket For more React performance tips, check out part 2 of this series: _React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component…_blog.logrocket.com Make React Fast Again [Part 2]: why-did-you-update 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:
![featured image - Make React Fast Again [Part 3]: Highlighting Component Updates](https://hackernoon.imgix.net/hn-images/1*mJFYp7LKVzZM3PPjFb0QXQ.png?auto=format&fit=max&w=3840)
