Using the React Profiler Plugin in React DevTools

React 16.5 adds support for a Profiler plugin in the DevTools, which uses the experimental React Profiler API to collect render timings for each component, helping developers identify performance bottlenecks and working seamlessly with upcoming features like time slicing and suspense.

The Profiler appears as a new "Profiler" tab in DevTools for applications that include the react-dom package (v16.5+ in development mode) or the react-dom/profiling build for production.

Click the "Record" button to start capturing performance data; DevTools automatically records a commit each time the app renders. Press "Stop" to finish recording and view the analysis.

Viewing Performance Reports

Commits Report

React’s work is divided into a render phase (calling the render function and diffing results) and a commit phase (updating the DOM and invoking lifecycle methods such as componentDidMount and componentDidUpdate ).

The Profiler groups timing information by commits, displayed as vertical bars near the top of the Profiler panel. The height and color of each bar represent the time spent rendering that commit.

Flamegraph

The flamegraph shows a horizontal bar for each component rendered during a selected commit; bar width indicates the time spent rendering the component (including its children) and color indicates relative cost (yellow = expensive, blue = cheap, gray = no render).

Clicking a component expands or collapses its subtree, and the right‑hand pane reveals the component’s props and state at that commit.

Sorting Chart

The sorting chart lists components for a single commit in descending order of render time, allowing quick identification of the most expensive components.

Component Chart

The component chart displays a bar for each component showing how many times it rendered during the session and its relative cost per render.

Interactions

An experimental API records user‑triggered interactions; these appear in the Profiler alongside commits, with each interaction linked to the commits it caused.

Troubleshooting

Selected root node has no profiling data

If your app has multiple root nodes, the Profiler may show a message that the selected root has no data. Switch to a different root node in the panel to view its profiling information.

Selected commit shows no timing data

When commits occur very quickly, performance.now() may not have recorded meaningful timestamps, resulting in a blank timing view.

For more details, see the original blog post at reactjs.org .