Identifying the problem areas

Detect performance bottlenecks in your apps with React Profiler

Jane Elizabeth
React Profiler
© Shutterstock / George Dolgikh

Worried about unsightly performance bottlenecks in your React apps? Use React Profiler to identify any timing problems and optimize your apps thanks to this new DevTools feature.

The newest release for React offers an experimental API to help developers identify performance problems for the popular JavaScript library. Now, developers can collect timing information about any rendered components with React Profiler.

This API is just one in a series of features being released in anticipation of the upcoming time slicing and suspense features. All of these upgrades are meant to improve and optimize performance across the board. This is considerably helpful, seeing as React drives some of the most widely used code in the world (*cough* Facebook *cough*).

React Profiler

This performance optimizing tool is downright simple. DevTools has a “Profiler” tab for any applications that support the new API, i.e. any react-dom 16.5 and above. Although it will be empty to start, just click the record button and it will begin profiling your apps.

React Profiler

Image via React.

Once it has started, DevTools automatically collects all kinds of performance information as your apps render. Make sure to use your apps normally, to give the profiler an adequate amount of data to work with. Click the stop button to finish profiling, making sure your app has rendered at least once while being recorded.

SEE ALSO: Top 5 IDEs and text editors for React

DevTools judges this data along several different metrics, making sure to read the performance data in a couple of ways. To start, developers can browse all of their commits and see how long it took for a particular commit to render. They can also filter through the commits, hiding anything that was faster than a certain value. This allows developers to weed out the good ones and focus on the slow ones.

In particular, the flame chart seems incredibly useful for comparing performance between different iterations of your app. This chart represents the state of your application for a particular commit: how long it took to render, how much time it spent last time it was rendered, and how much time it spent as part of the current commit.

At the micro level, the ranked chart looks at just one single commit. It focuses on all the React components within this one commit. Each component is ranked, showing the ones that took the longest to render at the top.

The component chart helpfully points out how many times a specific component has rendered in a profile. This bar chart shows the time needed for the component to render, but it also lets developers focus on a specific instance to really dig deep and figure out why it was so “expensive” to render.

Finally, the interactions API lets developers track the causes of an update. Now, developers can see why this one commit was so fast or slow by viewing the events that caused the application to render.

SEE ALSO: Reactor.js: A lightweight library for reactive programming

Getting React Profiler

Looking for more information about React Profiler API? Head on over to GitHub, where this experimental API is still under active development. Want to try it out for yourself? It’s a part of React 16.5. Just make sure you’ve got the right version of React and get developing!


Jane Elizabeth
Jane Elizabeth is an assistant editor for

Inline Feedbacks
View all comments