React DevTools Profiler for Wasted Renders

Stop Guessing, Start Measuring

The biggest performance mistake in React is optimizing based on intuition instead of data. Engineers scatter React.memo, useMemo, and useCallback everywhere "just in case" — adding complexity without knowing if there is a problem. The React DevTools Profiler tells you exactly which components re-render, how long each render takes, and why it happened.

No guessing. No premature optimization. Just data.

Setting Up the Profiler

1. Install the React Developer Tools browser extension
2. Open DevTools → Profiler tab (next to Components)
3. Click the Settings gear → check "Record why each component rendered while profiling"
4. Click the blue Record circle to start profiling
5. Interact with your app
6. Click Stop

Flamegraph View

The flamegraph shows every component that rendered during a commit. Width represents render duration. Color represents how long the render took relative to other components:

• Yellow/orange — slower renders (potential optimization targets)
• Blue/teal — faster renders
• Grey — components that did NOT render in this commit

Grey is the most important color. When a parent re-renders, you want its children to be grey — it means they were skipped (either by React.memo, bailout from same state, or because they are Server Components).

Ranked View

The Ranked view sorts components by render duration, with the slowest at the top. This is your hit list for optimization.

If a component takes 50ms to render and it renders 10 times during an interaction, that is 500ms of main thread work — a long task that degrades INP. The Ranked view surfaces these expensive components immediately.

What to Look For

1. Components with long render times — are they doing expensive computation during render? Should that computation be memoized or moved to a Web Worker?
2. Components that render frequently — are they re-rendering on every keystroke? Every mouse move? Every scroll event?
3. Components that render but produce the same output — the "why did this render?" column shows the reason. If it says "props changed" but you know the output is the same, memoization would help.

Why Did This Render?

With "Record why each component rendered" enabled, clicking any component in the flamegraph reveals why it rendered:

Component Highlight on Re-render

The Components tab (not Profiler) has a setting: "Highlight updates when components render". When enabled, components flash with a colored border when they render:

• Blue border — infrequent renders (normal)
• Yellow border — moderate render frequency
• Red border — frequent renders (potential problem)

This is great for catching cascading re-renders in real time. Type in an input, and watch which components flash. If the entire page flashes red on every keystroke, you have a problem.

The Memoization Decision Framework

Here is the data-driven framework for deciding when to memoize. Every decision starts with the Profiler, never with intuition:

When React.memo Helps

Use React.memo when the Profiler shows a component:

1. Re-renders frequently due to parent re-renders
2. Its own render is expensive (measurably slow)
3. Its props are actually the same between renders (or can be made the same with useMemo/useCallback in the parent)

const ExpensiveList = memo(function ExpensiveList({ items, onSelect }) {
  return items.map(item => (
    <ExpensiveItem key={item.id} item={item} onSelect={onSelect} />
  ));
});

When useMemo Helps

Use useMemo when the Profiler shows expensive computation during render:

function Dashboard({ transactions }) {
  const summary = useMemo(
    () => computeExpensiveSummary(transactions),
    [transactions]
  );

  return <SummaryView data={summary} />;
}

Only memoize if computeExpensiveSummary is measurably slow. If it takes 0.5ms, the memoization overhead (dependency comparison, cache management) is not worth it.

When useCallback Helps

Use useCallback when passing a callback to a memoized child:

function Parent({ items }) {
  const handleSelect = useCallback((id) => {
    setSelected(id);
  }, []);

  return <MemoizedList items={items} onSelect={handleSelect} />;
}

Without useCallback, handleSelect is a new function every render, defeating MemoizedList's React.memo. But useCallback alone does nothing — it only helps when the receiving component is memoized.

React Compiler and the Future of Memoization

React Compiler (formerly React Forget) aims to auto-memoize components and hooks at compile time, eliminating the need for manual React.memo, useMemo, and useCallback. When enabled, the compiler analyzes your component's dependencies and inserts memoization automatically.

However, the Profiler remains essential even with React Compiler:

• The compiler's memoization may not cover all cases
• Complex data flows might still cause unnecessary renders
• Third-party libraries may not be optimized
• The Profiler validates that optimizations are actually working