<p>React 16.5 adds support for a new DevTools profiler plugin. This plugin uses React’s <a href="https://github.com/reactjs/rfcs/pull/51" rel="noopener noreferrer" target="_blank">experimental Profiler API</a> to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications. It will be fully compatible with our upcoming <a href="https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html" rel="noopener noreferrer" target="_blank">time slicing and suspense</a> features.</p><p>This blog post covers the following topics:</p><ul><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#profiling-an-application" rel="noopener noreferrer" target="_blank">Profiling an application</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data" rel="noopener noreferrer" target="_blank">Reading performance data</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits" rel="noopener noreferrer" target="_blank">Browsing commits</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#filtering-commits" rel="noopener noreferrer" target="_blank">Filtering commits</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart" rel="noopener noreferrer" target="_blank">Flame chart</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart" rel="noopener noreferrer" target="_blank">Ranked chart</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart" rel="noopener noreferrer" target="_blank">Component chart</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#interactions" rel="noopener noreferrer" target="_blank">Interactions</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#troubleshooting" rel="noopener noreferrer" target="_blank">Troubleshooting</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#no-profiling-data-has-been-recorded-for-the-selected-root" rel="noopener noreferrer" target="_blank">No profiling data has been recorded for the selected root</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#no-timing-data-to-display-for-the-selected-commit" rel="noopener noreferrer" target="_blank">No timing data to display for the selected commit</a></li><li><a href="https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#deep-dive-video" rel="noopener noreferrer" target="_blank">Deep dive video</a></li></ul><h2><br></h2><h2>Profiling an application</h2><p>DevTools will show a “Profiler” tab for applications that support the new profiling API:</p>

Introducing the React Profiler

Profiling an application

RELATED BLOGS