Performance Optimization: Lazy Loading, Memo, Code Splitting, Profiling

🎯 Learning Objectives

• Implement lazy loading for React components
• Use React.memo and useMemo to prevent unnecessary re-renders
• Split code bundles for faster initial page load
• Profile and identify performance bottlenecks

📖 Core Content

1.1 React.memo and useMemo

jsx
// runnable
import React, { memo, useMemo } from 'react';
// Only re-render if props change
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* heavy rendering */}</div>;
});
// In parent: prevent re-computation on every render
function Dashboard({ transactions }) {
  const totalRevenue = useMemo(() => {
    return transactions.reduce((sum, t) => sum + t.amount, 0);
  }, [transactions]);  // Only recompute when transactions change
  return <div>Total: ${totalRevenue}</div>;
}

1.2 Lazy Loading and Code Splitting

jsx
// runnable
import React, { Suspense, lazy } from 'react';
// Component is loaded only when needed
const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

1.3 Profiling

javascript
Run Inline
// Chrome DevTools Performance Tab
// 1. Record interaction
// 2. Identify long tasks (> 50ms)
// 3. Check render frequency
// 4. Use React DevTools Profiler
// Check re-renders
console.log(`Rendering ${Component.name}`);

1.4 Why This Matters

• 1 second delay → 7% reduction in conversions
• 3 second load time → 53% of users leave
• Slow pages rank lower in search results

2. 📝 Practice Questions

Q1: A dashboard page renders a complex chart + 20 data widgets. Initial load takes 8 seconds. Propose optimization strategies.

1. Lazy load the chart: Only load the chart library when the user scrolls to it (code splitting).
2. Defer non-critical widgets: Display the top 5 widgets immediately, load the rest after page paint.
3. Memoize data computations: Use useMemo for all aggregate calculations.
4. Backend pagination: Load 20 widgets via 20 API calls → batch into 1 API call.
5. Virtual scrolling: If the widget list is long, use react-window to render only visible items.
6. Server-side rendering: Render the initial HTML on the server for faster first paint.

Expected improvement: 8s → 2-3s perceived load time. Join Discord PreviousTestingNextDeployment & DevOps