`Profiler`

Measures rendering performance of a React tree programmatically.

Since React 16.9 Spec ↗

Syntax

<Profiler id="..." onRender={fn}>...</Profiler>

Parameters

Name	Type	Required	Description
`id`	`string`	Yes	Identifier for the part of the UI being measured.
`onRender`	`function`	Yes	Callback invoked after commits with timing information.

Returns

element — A wrapper that reports render timings for its subtree.

Examples

function onRender(id, phase, actualDuration) {
  console.log(id, phase, actualDuration);
}

<Profiler id="Sidebar" onRender={onRender}>
  <Sidebar />
</Profiler>

Notes

onRender receives id, phase ("mount" or "update"), actualDuration, baseDuration, startTime, and commitTime. Profiling adds overhead, so use it in development or targeted measurements; it is largely inert in production builds unless a profiling build is used. Multiple Profilers can be nested.