![\"Filtering](\"/filtering-commits-683b9d860ef722e1505e5e629df7ef7e.gif\")
React 16.5 adds support for a new DevTools profiler plugin.\nThis plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications.\nIt will be fully compatible with our upcoming time slicing and suspense features.
\nThis blog post covers the following topics:
\nDevTools will show a “Profiler” tab for applications that support the new profiling API:
\n\n
Once you’ve started recording, DevTools will automatically collect performance information each time your application renders.\nUse your app as you normally would.\nWhen you are finished profiling, click the “Stop” button.
\n\n
Assuming your application rendered at least once while profiling, DevTools will show several ways to view the performance data.\nWe’ll take a look at each of these below.
\nConceptually, React does work in two phases:
\nrender and then compares the result to the previous render.componentDidMount and componentDidUpdate during this phase.The DevTools profiler groups performance info by commit.\nCommits are displayed in a bar chart near the top of the profiler:
\n\n
Each bar in the chart represents a single commit with the currently selected commit colored black.\nYou can click on a bar (or the left/right arrow buttons) to select a different commit.
\nThe color and height of each bar corresponds to how long that commit took to render.\n(Taller, yellow bars took longer than shorter, blue bars.)
\nThe longer you profile, the more times your application will render.\nIn some cases you may end up with too many commits to easily process.\nThe profiler offers a filtering mechanism to help with this.\nUse it to specify a threshold and the profiler will hide all commits that were faster than that value.
\n
The flame chart view represents the state of your application for a particular commit.\nEach bar in the chart represents a React component (e.g. App, Nav).\nThe size and color of the bar represents how long it took to render the component and its children.\n(The width of a bar represents how much time was spent when the component last rendered and the color represents how much time was spent as part of the current commit.)
\n
\n\nNote:
\nA component’s render time includes the time spent rendering its children,\nso the components which took the longest to render are generally near the top of the tree.
\n
As with the flame chart, you can zoom in or out on a ranked chart by clicking on components.
\nSometimes it’s useful to see how many times a particular component rendered while you were profiling.\nThe component chart provides this information in the form of a bar chart.\nEach bar in the chart represents a time when the component rendered.\nThe color and height of each bar corresponds to how long the component took to render relative to other components in a particular commit.
\n\n
You can navigate between interactions and commits by clicking on them:
\n![\"Navigate](\"/navigate-between-interactions-and-commits-7c66e7686b5242473c87b3d0b4576cf3.gif\")
The tracing API is still new and we will cover it in more detail in a future blog post.
\nIf your application has multiple “roots”, you may see the following message after profiling:\n\n
This message indicates that no performance data was recorded for the root that’s selected in the “Elements” panel.\nIn this case, try selecting a different root in that panel to view profiling information for that root:
\n![\"Select](\"/select-a-root-to-view-profiling-data-bdc30593d414b5c8d2ae92027ed11940.gif\")
Sometimes a commit may be so fast that performance.now() doesn’t give DevTools any meaningful timing information.\nIn this case, the following message will be shown:
\n
The following video demonstrates how the React profiler can be used to detect and improve performance bottlenecks in an actual React application.
\n