Performance & Patterns
React Performance Optimization
React performance work follows a fixed order: measure with the Profiler, cut unnecessary renders, cut unnecessary work inside renders, then cut the bundle. Optimising without measuring usually adds complexity and makes things slower.
What is Performance Optimization in React?
React performance work follows a fixed order: measure with the Profiler, cut unnecessary renders, cut unnecessary work inside renders, then cut the bundle. Optimising without measuring usually adds complexity and makes things slower.
Why Performance Optimization matters
Most perceived slowness in React apps comes from three specific causes — a huge initial bundle, rendering thousands of DOM nodes at once, and a top-level state change re-rendering the entire tree. Each has a different fix.
Key points to remember
- Profile a production build — development builds are deliberately slower.
- Moving state closer to where it is used often beats adding memoisation.
- Core Web Vitals — LCP, INP, CLS — are what search engines actually measure.
Symptom to fix
| Symptom | Likely cause | Fix |
|---|---|---|
| Slow first load | one large bundle | route-level code splitting with lazy + Suspense |
| Typing lags | expensive render per keystroke | debounce, useDeferredValue, useMemo |
| Scrolling stutters | thousands of DOM nodes | virtualisation (react-window) |
| Whole app re-renders | state lifted too high, or context value not memoised | move state down, split contexts, memo |
| Images shift the layout | no width/height | set explicit dimensions |
Common mistakes with Performance Optimization
- Wrapping everything in memo, useMemo and useCallback before profiling.
- Measuring in development and drawing conclusions from StrictMode double renders.
React Performance Optimization— Interview Questions & FAQs
What is the single biggest React performance win?+
Route-level code splitting. Most apps ship every page to every visitor, so splitting by route cuts the initial JavaScript sharply and directly improves Largest Contentful Paint.