Example 11 · 30 min
React Profiler API
Profiler · onRenderCallback · actualDuration · baseDuration
The Question
"How would you measure which components are the slowest in a React tree without installing any third-party library? Walk me through the Profiler API, what each callback argument means, and how actualDuration differs from baseDuration."
Wrap, don't instrument
No code changes inside profiled components — just wrap the subtree in <Profiler> and React reports the timing automatically.
actualDuration drops with memo
Memoized children that are bailed out are excluded from actualDuration but still counted in baseDuration.
Profiler is free in dev
React strips profiling overhead from production bundles by default. Use a profiling build (react-dom/profiling) for production measurements.
Profiled Subtree
- Apple
- Banana
- Cherry
Counter: 0
Render Log (latest first · last 10 commits)
Trigger an action above to see profiling data…
actualDuration
Real time spent rendering the profiled subtree for this commit. Includes only components that actually ran — memoized children that were skipped are excluded.
baseDuration
Estimated cost of a full re-render with no memoization at all. Compare it with actualDuration to measure how much memo saves.
Tip: notice that Increment Counter still triggers SlowList on every press — the ~4 ms spin appears in every row. Wrap SlowList in React.memo (see Example 7) to skip it when items hasn't changed, and watch actualDuration drop while baseDuration stays the same.
onRender Callback — All Parameters
| Parameter | Type | Meaning |
|---|---|---|
id | string | The id prop of the <Profiler> — useful when nesting multiple profilers. |
phase | "mount" | "update" | "nested-update" | "mount" on first render, "update" on re-renders, "nested-update" when a child triggers state during render. |
actualDuration | number (ms) | Time spent rendering this commit, skipping bailed-out memoized subtrees. |
baseDuration | number (ms) | Estimated full-render cost with no memoization — your worst-case baseline. |
startTime | number (ms) | When React began rendering this update (relative to page load). |
commitTime | number (ms) | When React committed the update — useful to correlate with other metrics. |