Optimizing React Performance: From 3s to 300ms

The Problem

Our dashboard was taking 3 seconds to become interactive. Users were bouncing. We needed to fix it fast.

Here's the systematic approach we took to cut load time by 90%.

Step 1: Measure First

Before optimizing anything, we profiled with React DevTools and Lighthouse. The results showed three main bottlenecks: a 2MB JavaScript bundle, 500+ component re-renders on initial load, and a 200-row table rendering all rows at once.

Step 2: Code Splitting

We lazy-loaded every route and heavy component.

Step 3: Virtualization

For our 200-row table, we switched to virtual rendering with @tanstack/react-virtual.

Step 4: Strategic Memoization

Not everything should be memoized. We focused on components that receive object/array props, components in frequently-updating contexts, and expensive computed values.

Results

TTI went from 3.2s to 0.3s, bundle size from 2.1MB to 420KB, re-renders from 500+ to 45, Lighthouse from 34 to 96.