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!
Performance timeline
React 15.4.0 introduced a new performance timeline feature that lets you see exactly when components get mounted, updated, and unmounted. It also lets you visualize component lifecycles in relation to each other.
Note: For now, this feature only works in Chrome, Edge, and IE, since it leverages the User Timing API which has yet to be implemented in all browsers.
How it works
- Open your app and append the query param:
react_perf. For example,[http://localhost:3000?react_perf](http://localhost:3000?react_perf) - Open the Chrome DevTools Performance tab and press Record.
- Perform the actions that you want to analyze.
- Stop recording.
- Inspect the visualization under User Timing.
Understanding the output
Each colored bar shows time that a component is doing “work”. Since JavaScript is single-threaded, whenever a component is mounting or rendering, it’s hogging the main thread and preventing other code from running.
The text in brackets like [update] describes which part of the component lifecycle is taking place. The timeline breaks down each step, so you can see fine-grained timings on methods like [componentDidMount] [componentWillReceiveProps] [ctor] (constructor) and [render].
Bars that are stacked represent component trees. While it is typical to have fairly deep component trees in React, if you are optimizing a component that is mounted frequently, it can help to reduce the number of wrapper components since each adds a small performance and memory penalty.
One caveat here is that the timing numbers in the timeline are for the development build of React, which is much slower than prod. In fact, the performance timeline itself even slows down your app. While these numbers shouldn’t be considered representative of real-world performance, the relative timings between different components are accurate. Also, whether or not a component updates at all is not dependent on a prod build.
Demo!
For fun, I rigged the TodoMVC app to have some serious performance problems. You can try it out here:
TodoMVC_Optimized for Extreme Low Performance_perf-demo.firebaseapp.com
To see the timeline, open the Chrome dev tools, go to the “Performance” tab, and click Record. Then add some TODOs in the app, stop the recording, and inspect the timeline. See if you can spot which components are causing the performance problems :)
Debugging Performance Issues in Production
The performance timeline feature in React only works in local development, since it gets compiled out of React’s production build. If you’re interested in understanding performance issues in your production app, 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 timings, 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
react_perf is a fantastic tool for visualizing React component lifecycles. It lets you quickly see which components are updating, and which might be slowing down your app.
Since react_perf only works in development, check out LogRocket, for diagnosing bugs and performance issues in production.
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: