React: What is React DevTools Profiler flame graph and how to read it?

Flame graph in React DevTools Profiler is a visualization of rendering time for each component during one update phase.

How it works step-by-step:

1. Open React DevTools → Profiler tab.
2. Click Record to start capturing renders.
3. Interact with your app (click buttons, type text, navigate).
4. Click Stop to see the flame graph for that interaction.
5. Each bar represents a component — wider bars took longer to render.

How to read:

1. Bar width = rendering time. Wider = slower.
2. Color = operation type (blue = mount, yellow = update, gray = passive effect).
3. Height = depth in component tree.
4. Top component = parent, bottom = children.

Analysis example:

What to look for:

• Component with largest width — optimization candidate.
• Gray bars — useEffect synchronously blocks render.
• If "after" time > "actual" time — problem in DOM operations.
• Re-renders without state change — unnecessary re-renders (use React.memo or split context).

Actions:

1. Click on a component → see "Why did this render?" in the sidebar.
2. Compare actualDuration vs baseDuration.
3. If baseDuration >> actualDuration — memoization helps (component is expensive but rarely changes).
4. If actualDuration >> baseDuration — memoization hurts (component is cheap but re-renders often).

Configuration options:

• Highlight updates — in the Components tab, enable "Highlight updates when components render" to visually see re-renders.
• Record hot re-renders — in the Profiler settings, enable "Record why each component rendered while profiling."
• Filter components — use the search bar to focus on specific components.

Performance considerations:

• The Profiler itself adds overhead — disable it in production.
• Use the Profiler to identify bottlenecks, not to micro-optimize every component.
• Focus on components with actualDuration > 16ms (one frame at 60fps).

Common optimizations based on flame graph findings:

• Unnecessary re-renders → React.memo, useMemo, useCallback.
• Expensive computations → move to a Web Worker or memoize.
• Large DOM updates → virtualize long lists with react-window.
• Context re-renders → split context or use use-context-selector.