Detect performance bottlenecks in your apps with React Profiler
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.
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*).
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.
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.
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!