React: How to use React DevTools Profiler for optimization?

React DevTools Profiler — a tool for measuring rendering performance of components.

Why it matters: Optimizing without measurement is guessing. The Profiler shows exactly which components re-render, how long each render takes, and why. This data-driven approach prevents premature optimization (wrapping everything in React.memo) and targets the actual bottlenecks.

How to use:

1. Open React DevTools (F12 → Components).
2. Go to the Profiler tab.
3. Press Record (red circle button).
4. Perform actions on the page.
5. Press Stop.

What it shows:

• Flamegraph — which components rendered and how long they took.
• Ranked — components sorted by render time.
• Commit tree — which components updated on each commit.

What to look for:

• Gray components — did not re-render (React.memo works!).
• Yellow/orange — re-rendered, but fast.
• Red — re-rendered slowly (needs optimization).

Programmatic approach (React.Profiler):

1import { Profiler } from "react";
2
3function onRenderCallback(id, phase, actualDuration) {
4  if (actualDuration > 16) {  // More than 16ms = 60fps
5    console.warn(`Slow render: ${id} — ${actualDuration}ms`);
6  }
7}
8
9<Profiler id="ExpensiveList" onRender={onRenderCallback}>
10  <ExpensiveList items={items} />
11</Profiler>

Advanced profiling pattern — collecting metrics over time:

1const renderMetrics: Record<string, number[]> = {};
2
3function trackRender(id: string, phase: string, actualDuration: number) {
4  if (!renderMetrics[id]) renderMetrics[id] = [];
5  renderMetrics[id].push(actualDuration);
6  const avg = renderMetrics[id].reduce((a, b) => a + b, 0) / renderMetrics[id].length;
7  if (avg > 10) console.warn(`${id} avg: ${avg.toFixed(1)}ms (${renderMetrics[id].length} renders)`);
8}
9
10<Profiler id="Dashboard" onRender={trackRender.bind(null, "Dashboard")}>
11  <Dashboard />
12</Profiler>

Optimization tips:

• Measure first, then optimize — never assume which component is slow.
• Use Why Did You Render for automatic detection of unnecessary re-renders.
• A component that re-renders in under 1ms is not a bottleneck, even if it re-renders often.
• Focus optimization on components that are both frequently rendered and slow to render.