Code Splitting and Lazy Loading

🎯 Objective

By the end of this lesson, you will:

• Understand what code splitting is and why it improves performance.
• Use React.lazy() and Suspense to load components only when needed.
• Reduce initial bundle sizes using dynamic imports.
• Apply best practices to implement lazy loading efficiently.

---

🧠 What Is Code Splitting?

Code Splitting is a technique that allows you to split your JavaScript bundle into smaller chunks, so your app loads faster by only loading what’s needed at the moment.

👎 Without Code Splitting:

• Everything loads at once (slow initial load).

👍 With Code Splitting:

• Only necessary code loads first. Extra code loads on demand.

---

⚡ Why Code Splitting Matters

• 🚀 Improves page load speed and performance.
• 🧩 Reduces time to first interaction (especially on mobile).
• 🎯 Essential for large React apps with multiple routes or features.

---

🔧 Dynamic import() – The Foundation

Modern JavaScript allows you to import modules dynamically like this:

import('path/to/Component').then((module) => {
  const MyComponent = module.default;
});

✅ Loads a module only when needed
✅ Webpack creates a separate chunk for this module

---

🧰 React.lazy() and Suspense

React simplifies code splitting with:

📦 React.lazy()

const MyComponent = React.lazy(() => import('./MyComponent'));

• Dynamically loads a component when it’s rendered
• Requires a fallback UI using Suspense

---

⏳ Suspense

Wrap lazy-loaded components in a fallback loader:

import React, { Suspense, lazy } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Dashboard />
    </Suspense>
  );
}

🪄 While Dashboard is loading, the user sees “Loading…”

---

💡 Use Case: Code Splitting by Route

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function AppRoutes() {
  return (
    <Suspense fallback={<div>Loading page...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

✅ Loads each page only when needed
✅ Great for large multi-page apps

---

🛠 Activity: Lazy Load a Heavy Component

1. Create a HeavyChart.js with a slow-loading chart.
2. Use React.lazy() to load it on button click.
3. Wrap it in <Suspense fallback={<Loading />}>.

const HeavyChart = lazy(() => import('./HeavyChart'));

function Analytics() {
  const [showChart, setShowChart] = React.useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Load Chart</button>
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

---

🔁 Best Practices

✅ Lazy-load routes or large feature components
✅ Use meaningful fallbacks (spinners, skeletons, etc.)
✅ Combine with React Router for route-level splitting
✅ Group components logically if they load together often

---

⚠️ Gotchas to Avoid

❌ Don’t lazy-load small or frequently used components
❌ Always wrap lazy components in Suspense
❌ React.lazy() only supports default exports

Workaround for named exports:

const Special = lazy(() =>
  import('./SpecialComponent').then((mod) => ({ default: mod.NamedExport }))
);

---

📚 Recap

Feature	Purpose
React.lazy()	Load components on demand
Suspense	Show fallback while component loads
import()	Dynamically fetch JS modules
Code Splitting	Improve performance by reducing bundle size

---

🧠 Reflection Questions

• What’s the benefit of splitting code instead of loading all at once?
• How does Suspense improve the user experience?
• When should you avoid using lazy loading?

---

🎮 Suggested Practice

Build a Responsive Portfolio Page that:

• Lazy-loads the “Projects” section
• Shows a spinner while loading
• Uses React.lazy() and Suspense

---

📘 Further Resources

• React Docs: Code Splitting
• Webpack Docs: Lazy Loading
• FreeCodeCamp: Lazy & Suspense

---

✅ Action Step

Refactor one of your apps to:

• Lazy-load at least one route or feature
• Use a loading fallback with Suspense

---

Let me know if you’d like the next lesson to be on:

✅ Reusable Component Patterns
✅ Form Handling and Validation
✅ React Performance Optimization

---