React Performance Optimization

Why React apps slow down at scale

Performance regressions rarely show up in Storybook. They appear when real users load ten tabs, filter AG Grid with 50k rows, or checkout on 4G. The fix is not another memo — it is architecture: where state lives, how data is fetched, and what ships in the initial bundle.

We profile with React DevTools Profiler, Lighthouse, and RUM. We set bundle budgets in CI and block merges that add more than agreed KB gzip without justification.

High-impact tactics

• Route-level and component-level code splitting with predictable chunk names
• Virtualized lists (react-window, AG Grid SSRM) instead of rendering full datasets
• TanStack Query for server cache — stop duplicating fetch logic in useEffect
• Defer non-critical third-party scripts; audit npm dependencies quarterly
• Move heavy computation to Web Workers or server components (Next.js)

When to call an architect

If LCP or INP fail Core Web Vitals on production URLs, or if every feature adds 200KB to main.js, you need a performance sprint led by someone who has done this on ecommerce or enterprise portals — not a generic audit checklist.