How do you optimize performance in a React application?
Quick answer
Measure first with the Profiler and Lighthouse, then reduce unnecessary renders, split code with lazy loading, virtualise long lists, and optimise images and bundle size.
Rendering: avoid wasted re-renders by colocating state, using React.memo, useMemo and useCallback where profiling shows a benefit, and avoiding creating new objects in props for memoised children. For slow updates triggered by typing or filtering, useTransition and useDeferredValue keep the interface responsive.
Loading: split the bundle by route with React.lazy and Suspense (or Next.js dynamic imports), remove unused dependencies, and analyse the bundle with a tool such as webpack-bundle-analyzer. Serve properly sized, modern-format images and lazy-load below-the-fold content.
Data and lists: virtualise long lists with a library such as react-window so only visible rows are in the DOM, cache server data with React Query or SWR, and debounce expensive handlers. Track real-user metrics such as Largest Contentful Paint and Interaction to Next Paint, not just lab scores.
const Reports = React.lazy(() => import("./Reports"));
<Suspense fallback={<Spinner />}>
<Reports />
</Suspense>Key points
- Profile before optimising
- Reduce renders, reduce bundle size, reduce DOM size
- Use real-user metrics to verify improvements