React Profiler

React Profiler: Finding and Measuring Slow Renders

The React Profiler measures how often a component tree renders and how many milliseconds each render takes. You can use the <Profiler> component directly in code for telemetry or inspect visual flamegraphs inside the React Developer Tools browser extension.

Instrumenting a Component Tree with <Profiler>

Wrap any subtree in <Profiler id="..." onRender={callback}>. React invokes your onRender callback whenever a descendant commits an update, providing actualDuration (time spent rendering the commit) and baseDuration (estimated time without memoization).

import { Profiler } from 'react';

function handleRender(id, phase, actualDuration, baseDuration) {
  if (actualDuration > 16) {
    console.warn(`[Perf] ${id} (${phase}) took ${actualDuration.toFixed(2)}ms (base: ${baseDuration.toFixed(2)}ms)`);
  }
}

export function ReportingView({ rows }) {
  return (
    <Profiler id="SalesTable" onRender={handleRender}>
      <SalesTable rows={rows} />
    </Profiler>
  );
}

Reading the Profiler Metrics

• phase: Tells you whether this was the initial 'mount', a state/prop 'update', or a 'nested-update'.
• actualDuration: Lower values after adding memo or useMemo confirm your optimization actually helped.
• 16ms Frame Budget: Aim to keep interactive updates well under 16ms so scrolling and typing stay smooth at 60 frames per second.

Common Profiling Mistakes

• Leaving <Profiler> Enabled in Production Builds Without Sampling: <Profiler> adds slight runtime overhead and is stripped in production by default unless you intentionally ship the profiling build.
• Optimizing Before Measuring: Adding useMemo and useCallback blindly adds complexity without speeding up fast components. Profile first, then optimize only slow commits.

Frequently Asked Questions

Why does actualDuration sometimes appear as 0 in production?

Standard production React builds disable <Profiler> callbacks to keep bundle size and runtime overhead minimal. Use React DevTools in development or React's profiling build for staging checks.

How do I see why a component re-rendered?

Open React Developer Tools in Chrome or Firefox, open the Profiler tab, enable "Record why each component rendered while profiling" in settings, and record an interaction.

Can I nest multiple <Profiler> tags?

Yes. You can measure the whole page shell with an outer <Profiler> and isolate expensive charts or tables with inner <Profiler> tags.