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:

npx lighthouse https://app.example.com --view

The results showed three main bottlenecks: 1. A 2MB JavaScript bundle 2. 500+ component re-renders on initial load 3. A 200-row table rendering all rows at once

Step 2: Code Splitting

We lazy-loaded every route and heavy component:

const AdminDashboard = lazy(() => import("./admin/dashboard"))
const AnalyticsChart = lazy(() => import("./charts/analytics"))

Step 3: Virtualization

For our 200-row table, we switched to virtual rendering:

function VirtualTable({ items }: { items: Item[] }) { const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 48, }) // Only renders visible rows } ```

Step 4: Strategic Memoization

Not everything should be memoized. We focused on: - Components that receive object/array props - Components in frequently-updating contexts - Expensive computed values

Results