React DevTools Profiler Guide

Use the React DevTools Profiler to find and fix unnecessary re-renders, understand flame graphs, and apply React.memo / useMemo / useCallback where they actually matter.

Profiler Workflow

1. Install React DevTools extension (Chrome Web Store or Firefox Add-ons)
2. Open DevTools → React tab → Profiler sub-tab
3. Enable "Record why each component rendered" in Profiler settings (gear icon)
4. Click Record, perform the slow interaction, click Stop
5. Examine the flame graph — look for wide yellow bars (slow components)
6. Click a bar to see why it rendered (prop/state change details)

Reading the Flame Graph

React.memo — Prevent Parent-Triggered Re-renders

// WITHOUT memo: re-renders every time Parent re-renders
function ExpensiveChart({ data, title }: Props) {
  return <svg>{/* complex chart rendering */}</svg>;
}

// WITH memo: only re-renders when data or title change (shallow compare)
const ExpensiveChart = React.memo(function ExpensiveChart({ data, title }: Props) {
  return <svg>{/* complex chart rendering */}</svg>;
});

// Custom comparator for deep comparison or selective prop ignoring
const ExpensiveChart = React.memo(
  function ExpensiveChart({ data, title, onHover }: Props) {
    return <svg>{/* ... */}</svg>;
  },
  (prev, next) => prev.data === next.data && prev.title === next.title
  // ↑ ignores onHover changes — only re-render when data or title changes
);

useCallback — Stable Function References

// PROBLEM: new arrow function on every render breaks React.memo
function Parent() {
  const [count, setCount] = useState(0);

  // BAD: new reference every render → MemoizedChild always re-renders
  return <MemoizedChild onClick={() => setCount(c => c + 1)} />;
}

// SOLUTION: stable reference with useCallback
function Parent() {
  const [count, setCount] = useState(0);

  // GOOD: same function reference unless deps change
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // empty deps = never recreated

  return <MemoizedChild onClick={handleClick} />;
}

useMemo — Expensive Calculations

// BAD: recalculates on every render
function UserList({ users, filter }: Props) {
  // This runs even when unrelated state changes
  const filtered = users.filter(u => u.role === filter);
  return filtered.map(u => <UserRow key={u.id} user={u} />);
}

// GOOD: only recalculates when users or filter changes
function UserList({ users, filter }: Props) {
  const filtered = useMemo(
    () => users.filter(u => u.role === filter),
    [users, filter]   // recalculate only when these change
  );
  return filtered.map(u => <UserRow key={u.id} user={u} />);
}

// Rule of thumb: use useMemo only when:
// 1. The calculation takes > 1ms (profile first!)
// 2. The result is passed to a React.memo component as a prop
// 3. The result is used as a dependency of useEffect/useCallback

Programmatic Profiling with the Profiler Component

import { Profiler, ProfilerOnRenderCallback } from 'react';

const onRender: ProfilerOnRenderCallback = (
  id,           // component name
  phase,        // 'mount' or 'update'
  actualDuration, // time for this render
  baseDuration,   // estimated time without memoization
  startTime,
  commitTime
) => {
  if (actualDuration > 16) {  // flag renders that miss 60fps
    console.warn(`Slow render in ${id}: ${actualDuration.toFixed(2)}ms`);
    // Send to monitoring: analytics.track('slow_render', { id, actualDuration });
  }
};

// Wrap your slow subtree
<Profiler id="DashboardChart" onRender={onRender}>
  <DashboardChart data={chartData} />
</Profiler>

Common Anti-Patterns and Fixes

• Object literals as props — style={{ color: 'red' }} creates new object each render; extract to constant or useMemo
• Context re-rendering all consumers — Split large contexts; use separate providers for state that changes at different rates
• Array index as key — Use stable IDs; index keys break reconciliation when list order changes
• Not virtualizing long lists — Use react-window or @tanstack/react-virtual for lists over 50-100 items
• useState in hot paths — Each setState causes a re-render; batch updates with useReducer or flushSync
• Premature memoization — Memoization adds overhead; only apply where Profiler shows actual slowness