How Would You Optimize a React App for Performance?

Prompt How would you optimize a React application for performance? Walk from measurement to specific techniques.

Be ready to discuss

• Measure first: React DevTools Profiler, why-did-you-render, Lighthouse/Web Vitals — optimize what profiling shows, not speculatively.
• Re-render control: React.memo for pure children, useMemo for expensive computations, useCallback for stable handler identity (and the referential-equality reason all three exist); stable keys; pushing state down / lifting content up (children as props) so less of the tree re-renders; context splitting to avoid provider-wide re-renders.
• Load-time: code splitting with React.lazy/Suspense on routes and heavy widgets; tree-shaking and bundle analysis (source-map-explorer); dynamic import of rarely-used libs; image/font optimization.
• Big lists: virtualization (react-window) — render only the viewport; pagination/infinite scroll at the data layer.
• Data layer: request caching/dedup (SWR/React Query), debounced inputs, optimistic updates; avoiding waterfalls with parallel fetches.
• Advanced: concurrent features (useTransition, useDeferredValue) for keeping input responsive, SSR/streaming for first paint, web workers for CPU-heavy work.