Introducing the React Profiler

React 16.5 adds support for a new DevTools profiler plugin. This 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. It will be fully compatible with our upcoming time slicing and suspense features.

This blog post covers the following topics:

• Profiling an application

• Reading performance data

  • Browsing commits
  • Filtering commits
  • Flame chart
  • Ranked chart
  • Component chart
  • Interactions

• Troubleshooting

  • No profiling data has been recorded for the selected root
  • No timing data to display for the selected commit
• Deep dive video

Profiling an application

DevTools will show a “Profiler” tab for applications that support the new profiling API: