Lesson 30 — Code Splitting & Lazy Loading in React (Improve App Performance)

🧭 Introduction

As React applications grow, the JavaScript bundle size increases. A large bundle means:

• Slower initial page load
• Poor performance on slow networks
• Bad user experience

To solve this, React provides Code Splitting and Lazy Loading, which allow your app to load only what is needed, when it is needed.

In this lesson, you will learn:

• What code splitting is
• What lazy loading means
• How React.lazy() works
• How Suspense works
• Real-world routing example
• Best practices and FAQs

❓ What is Code Splitting?

Code Splitting means:

Breaking your JavaScript bundle into smaller chunks and loading them on demand.

Instead of loading the entire app at once, React loads:

• Core code first
• Feature code only when needed

❓ What is Lazy Loading?

Lazy Loading means:

Loading a component only when it is actually required.

Lazy loading is commonly used for:

• Routes
• Heavy components
• Dashboards
• Admin panels

🧠 Why Code Splitting is Important?

Without code splitting ❌

• Large bundle size
• Slow first load
• All pages load even if not used

With code splitting ✅

• Faster initial load
• Better performance
• Optimized user experience

🧩 How React Supports Lazy Loading

React provides:

• React.lazy() → for lazy loading components
• Suspense → fallback UI while loading

🧠 Basic Syntax of React.lazy

const Component = React.lazy(() => import("./Component"));

👉 Component is loaded only when rendered.

🧠 What is Suspense?

Suspense lets you show a loading UI while a lazy component is being loaded.

Basic Syntax

<Suspense fallback={<p>Loading...</p>}>
  <Component />
</Suspense>

🛠 Simple Example: Lazy Loading a Component

📄 App.jsx

import React, { Suspense } from "react";

const About = React.lazy(() => import("./About"));

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

export default App;

✔ About loads only when rendered
✔ Loading... appears meanwhile

🧩 Real-World Example: Lazy Loading Routes

This is the most common real-world use case.

📄 App.jsx (Lazy Routes)

import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./pages/Home"));
const Dashboard = React.lazy(() => import("./pages/Dashboard"));
const Login = React.lazy(() => import("./pages/Login"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<h2>Loading page...</h2>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

✔ Each page loads only when visited
✔ Faster initial load

🔄 What Happens Behind the Scenes?

1️⃣ App loads main bundle
2️⃣ User navigates to a route
3️⃣ React loads required chunk
4️⃣ Suspense shows fallback
5️⃣ Component renders

⚠ Common Mistakes

❌ Forgetting to wrap lazy components with Suspense
❌ Lazy loading very small components
❌ Using lazy loading everywhere
❌ Not providing fallback UI

🎯 Best Practices

✅ Lazy load routes & heavy components
✅ Keep fallback UI simple
✅ Avoid lazy loading frequently used components
✅ Combine with performance tools

🆚 Normal Import vs Lazy Import

❓ FAQs — Code Splitting & Lazy Loading

🔹 Is lazy loading good for every component?

No. Use it only for large or rarely used components.

🔹 Does lazy loading affect SEO?

No for SPAs, but server-side rendering may require additional setup.

🔹 Can I lazy load images also?

Yes, but image lazy loading is handled differently (HTML or libraries).

🔹 Does Suspense work with data fetching?

Not yet fully in production (future React features).

🧠 Quick Recap

✔ Code splitting improves performance
✔ Lazy loading loads components on demand
✔ React.lazy + Suspense are core tools
✔ Best used with routing

🎉 Conclusion

Code splitting and lazy loading are essential performance optimization techniques in modern React applications. By loading only what the user needs, you can dramatically improve speed and user experience.

After this lesson, your React apps will feel lighter, faster, and more professional 🚀

👉 Next Lesson (SECTION 6):
Lesson 31 — Error Boundaries in React