Performance: Profiling, Memoization, and Code Splitting

React is fast by default, but as apps grow, performance issues appear: components re-rendering more than necessary, expensive computations repeating, and large JavaScript bundles slowing initial load. Optimising React performance is about three things — measuring to find real bottlenecks, reducing wasted re-renders, and shipping less code up front. The cardinal rule is to measure first, because intuition about performance is often wrong.

The React DevTools Profiler shows you which components render, how often, and why, turning guesswork into evidence. Once you have data, memoisation (React.memo, useMemo, useCallback) prevents unnecessary re-renders and recomputation, and code splitting with React.lazy and Suspense defers loading parts of the app until needed, shrinking the initial bundle.

React 19's compiler automates much memoisation, reducing manual work, but understanding why re-renders happen and how to control them remains essential. This lesson covers profiling to find bottlenecks, the memoisation tools and when they help, and code splitting to reduce bundle size — the toolkit for making React apps fast where it actually matters.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.