React Performance Optimization — A Practical Guide

React is fast by default, but as your application grows, you'll start noticing performance bottlenecks. This guide covers practical techniques to keep your React app snappy and responsive.

Understanding Re-renders

A React component re-renders when its state changes, its parent re-renders, or the context it consumes changes. The key to performance is minimizing unnecessary re-renders — renders that produce the same output as before.

React.memo — Preventing Unnecessary Re-renders

React.memo is a higher-order component that memoizes the rendered output. If the props haven't changed, React skips rendering the component and reuses the last result. Use it for components that render often with the same props, especially in lists or frequently updating parents.

useMemo and useCallback

useMemo memoizes expensive computed values, while useCallback memoizes function references. Use useMemo for expensive calculations that depend on specific values. Use useCallback for functions passed as props to memoized child components. Don't overuse them — they have their own memory cost.

Code Splitting with React.lazy

Code splitting breaks your app into smaller chunks loaded on demand. Use React.lazy() with Suspense to lazy-load components that aren't needed immediately — like modals, tabs, or routes. This reduces the initial bundle size and improves Time to Interactive.

Virtualization for Long Lists

Rendering thousands of items in a list kills performance. Libraries like react-window and react-virtuoso render only the visible items, dramatically improving scroll performance. If you have a list with more than 100 items, virtualization is worth considering.

State Management Optimization

Keep state as local as possible. Lifting state up too high causes entire subtrees to re-render. Consider using state management libraries like Zustand or Jotai that allow fine-grained subscriptions, so only the components that use specific state slices re-render.

Image Optimization

Use next/image or similar components for automatic image optimization. Implement lazy loading for images below the fold. Use modern formats like WebP and AVIF. Serve responsive images with srcSet for different screen sizes.

Conclusion

Performance optimization is about measuring first and optimizing where it matters. Use React DevTools Profiler to identify bottlenecks, then apply the right technique. Don't prematurely optimize — focus on user-perceived performance.