Locate expensive subtrees
Diagnosing slow updates
React 19+ · Component
Profiler
<Profiler> measures a React subtree’s rendering performance programmatically. Give it an id and an onRender callback to receive information about committed updates and their timing.
How it works
Wrap a React subtree in Profiler and provide an identifier plus an onRender callback. React invokes the callback after updates commit, supplying timing and render metadata so you can inspect costly subtrees.
Syntax
<Profiler id="name" onRender={callback}>{children}</Profiler>Parameters
| Name | Type | Description |
|---|---|---|
id | string | String identifying the UI portion being measured. |
onRender | function | Callback invoked when components within the profiled tree update; it receives render and timing information. |
Returns
A React element that renders its children while reporting profiled commits through onRender.
Key points
- Profiler provides programmatic render-performance measurements for a selected React subtree.
- Put the boundary around the components whose rendering behavior you want to analyze.
- Use id to label the measured region in callback data and logs.
- Supply onRender to receive notifications after updates within the boundary.
- Use callback arguments to record rendered content and elapsed render time.
Common mistakes
- Profiling can affect measurements and is off in ordinary production builds; use a profiling-enabled production build when production data is required.
- Place separate Profiler boundaries around distinct areas when you need independent measurements.
Example: Measure a subtree
import { Profiler, useState } from 'react';
function onRender(id: string, phase: string, actualDuration: number) {
console.log(`${id}: ${phase}, ${actualDuration.toFixed(1)}ms`);
}
export default function App() {
const [count, setCount] = useState(0);
return (
<Profiler id="Counter" onRender={onRender}>
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
</Profiler>
);
}Wrap the subtree to measure and log each committed render.
When to use it
Measure separate UI areas
Comparing application regions
Collect data with a profiling build
Investigating production performance
Interview questions
QWhat does Profiler do and when is onRender called?
Profiler measures a React tree programmatically. It requires an id and an onRender callback, which React calls when a component in the profiled tree commits an update.
Follow-up: How would you isolate performance problems across a large app? Add multiple Profiler boundaries around the areas you want to compare, then inspect each callback’s reported render information.
QWhat are Profiler’s required props?
The id is a string naming the UI region being measured. The callback receives information about what rendered and how long it took.
Follow-up: What trade-off should guide where boundaries are added? Profiling adds CPU and memory overhead, so instrument only the regions needed for diagnosis.
QCan Profiler collect measurements in a normal production build?
Profiler can be used in production only with a special profiling-enabled production build; ordinary production profiling is disabled by default to avoid overhead.
Follow-up: What should be compared when investigating a production-only slowdown? Measure the relevant subtree in a profiling build, while remembering that profiling itself changes runtime overhead.
Related
<StrictMode><Activity>React Performance tracks