React Performance Optimization: 10 Techniques That Actually Work

Why React Performance Matters

A slow React app loses users. Studies show that a 100ms delay in page response can reduce conversion rates by 7%. React is fast by default, but a poorly architected component tree can create waterfall renders, excessive re-renders, and bloated JavaScript bundles. The good news: most performance problems follow predictable patterns with straightforward solutions.

1. Memoization with React.memo, useMemo, useCallback

React.memo prevents a component from re-rendering when its parent re-renders if its props haven't changed. useMemo caches expensive computed values between renders. useCallback caches function references so they don't change on every render (critical when passed as props to memo-ized children). The rule: reach for these only after profiling confirms unnecessary re-renders — premature memoization adds complexity without benefit.

2. Code Splitting with Dynamic Imports

Split your JavaScript bundle by route or feature using React.lazy() and Suspense. Large libraries (chart libraries, rich text editors, date pickers) should always be dynamically imported. Next.js's dynamic() function adds SSR support and a loading state. Code splitting can reduce your initial bundle size by 40-60%, dramatically improving Time to Interactive (TTI).

3. Virtualization for Long Lists

Rendering 10,000 list items to the DOM makes your app crawl. Virtualization (windowing) renders only the items currently visible in the viewport. Use react-window or react-virtual for this. The performance difference is staggering: rendering 10,000 items drops from 2000ms to 20ms. Any list with more than 50-100 items is a candidate for virtualization.

4. Optimize Images

Images are the biggest performance killer in most web apps. Use Next.js Image component for automatic WebP conversion, responsive sizes, and lazy loading. Set explicit width and height to avoid layout shifts (CLS). Use blur placeholders for a better perceived performance. For user-uploaded images, store originals in Cloudinary and use their URL transformations to serve optimized sizes.

5. Use the React DevTools Profiler

Before optimizing, profile. The React DevTools Profiler shows you exactly which components re-render, how long they take, and why. Record a profiling session, then use the flame graph to identify components that render more than expected. A component re-rendering 50 times when it should render once is a clear optimization target. Measure before and after every optimization to confirm it helped.