React · Chapter 32 of 42
Performance Optimization
React is fast by default, but large or complex apps can hit performance issues from unnecessary re-renders or expensive computations.
Common strategies include memoization (`React.memo`, `useMemo`, `useCallback`), virtualization for long lists, and code splitting to reduce initial bundle size.
Finding bottlenecks
Use the React DevTools Profiler to identify which components re-render too often or take too long to render.
Common fixes
Memoize expensive components/values, virtualize long lists (e.g. with react-window), and split code so users only download what they need.
Example 1 (jsx)
// Before: re-renders on every parent render
function Row({ item }) {
return <li>{item.label}</li>;
}
// After: skips re-render if props are unchanged
const MemoRow = React.memo(Row);Output
(MemoRow re-renders only when its props actually change)React.memo skips re-rendering when props are shallowly equal.
Key points
- Use React DevTools Profiler to find real bottlenecks first.
- React.memo, useMemo, and useCallback reduce unnecessary work.
- Virtualize very long lists to render only visible items.
- Code splitting reduces the initial JavaScript bundle size.
💡 Note: Don't optimize prematurely — measure first, then apply the targeted fix.