7 React Performance Tips That Actually Matter

After optimizing React apps serving 10K+ users, here are the techniques that deliver real impact — not just micro-benchmarks.

1. Virtualize Long Lists

If you're rendering 100+ items, use react-window or @tanstack/virtual. I've seen 60% improvement in interaction responsiveness by virtualizing lists of just 50 items.

2. Code Split Routes and Heavy Components

Use React.lazy() and dynamic imports for route-level splitting. For heavy components (charts, editors, maps), load them only when needed:

const Chart = dynamic(() => import('./Chart'), { ssr: false });

3. Optimize Re-renders with useMemo and useCallback — Sparingly

Don't wrap everything in useMemo. Profile first. The real wins come from: - Memoizing expensive computations (filtering/sorting large arrays) - Stabilizing callback references passed to memoized children

4. Image Optimization

Use next/image or a CDN with responsive sizes. Lazy load below-the-fold images. WebP/AVIF formats can cut image sizes by 50-80%.

5. Debounce Search and Filter Inputs

A 300ms debounce on search inputs prevents dozens of unnecessary renders and API calls. Use useDeferredValue for non-urgent UI updates.

6. Avoid Prop Drilling — Use Composition

Instead of passing props through 5 levels (causing re-renders at each level), compose components or use context sparingly for truly global state.

7. Measure Before Optimizing

Use React DevTools Profiler and Chrome's Performance tab. The bottleneck is rarely where you think. I've spent hours optimizing the wrong component until I measured first.

Real-World Impact

By applying these techniques at Majid Al Futtaim, we reduced our Seller Portal's Largest Contentful Paint from 4.2s to 2.3s — a 45% improvement that directly impacted user engagement.