React Rendering Performance
Making React fast in production. What triggers re-renders, how to prevent wasted work, state colocation, composition patterns, and profiling with React DevTools.
Three things cause React components to re-render: setState, parent re-render, and context change. Prop changes do NOT trigger re-renders — this is the most common misconception in React. Understanding re-render triggers is the foundation of every performance optimization.
React.memo wraps a component to skip re-renders when props haven't changed. It uses Object.is for shallow comparison. This is powerful when used correctly and wasteful when misapplied. Know when it helps and when it's noise.
Wrapping a component in memo then adding useCallback to every function prop is one of the most common over-optimizations in React. Sometimes it's necessary, often it's cargo culting. Learn when this pattern actually helps and when it's just noise.
When a context value changes, EVERY consumer re-renders — even if they only use a small slice of the value. This is React's biggest hidden performance trap. Learn how to split contexts, use selectors, and structure providers to avoid the cascading re-render bomb.
The best performance optimization in React isn't memo or useCallback — it's putting state where it's used. State at the top of the tree cascades re-renders everywhere. State at the leaf only affects the leaf. Move state down, and the problem disappears.
Children as props, render props, and compound components solve re-render problems without memo or useCallback. These patterns let you structure components so that state changes only affect the components that actually need to update.
useTransition marks state updates as non-urgent, keeping the UI responsive while React processes heavy renders in the background. The old UI stays visible, isPending signals loading, and user interactions always take priority.
useDeferredValue creates a deferred copy of a value that lags behind the original during heavy renders. It's the component-level alternative to useTransition — use it when you can't control where the state update originates.
The React DevTools Profiler shows exactly which components rendered, why they rendered, how long each took, and how many times. Master the flamegraph, ranked chart, and 'Why did this render?' to diagnose performance issues scientifically.
Rendering 10,000 rows destroys performance — 10,000 DOM nodes, 10,000 component renders, megabytes of memory. Virtualization renders only visible rows (typically 20-50), creating the illusion of a complete list. TanStack Virtual is the modern library for this.
Eight scenarios where you predict which components re-render and which don't. Each question targets a specific re-render trigger or optimization pattern. Detailed explanations trace through React's exact rendering behavior.