Academy
mediumEngineering Practices#78

React DevTools profiler

Prompt

Wrap a performance-sensitive component tree with React.Profiler and log the render timing data (id, phase, actualDuration) to the console.

Solution

function onRender(id, phase, actualDuration) {
  console.log(`${id} [${phase}]: ${actualDuration.toFixed(2)}ms`)
}

export default function App() {
  return (
    <Profiler id="App" onRender={onRender}>
      <ExpensiveTree />
    </Profiler>
  )
}
Mentor's take

The <Profiler> component exists so render performance becomes a measured number instead of a vibe — and measurement-before-optimization is the entire senior position on React performance. Wrapping a subtree gives you a callback on every committed render with the data that matters: id (which tree), phase ("mount" vs "update" — a slow mount is a one-time cost, a slow update on every keystroke is the bug), and actualDuration (time spent rendering this commit, including children).

Why the programmatic API instead of just the DevTools flamegraph? Because the callback composes into tooling: log it in development, or feed it to your performance monitoring in production so regressions show up as trends across releases rather than as user complaints. The DevTools Profiler UI (available for React Native through React Native DevTools) is where you investigate; <Profiler> is how you watch continuously.

The workflow it enables: measure, find the component whose actualDuration dominates, fix that one thing (memo, moving state down, virtualizing a list), measure again. Note Profiler adds its own small overhead — wrap the suspect subtree, not the entire app, and don't leave dev-only logging in release.

Red flag: reaching for React.memo and useCallback everywhere before measuring — memoization has its own cost, and unmeasured optimization is how codebases accrete complexity with no user-visible win.

Say it: "I profile before I memoize — actualDuration on the update phase tells me which subtree actually burns the frame budget, and I fix only what the measurement names."