📘 React Mastery Series — Day 25

Code Splitting & Lazy Loading — Make Your React App Faster 🚀

Have you ever noticed:

👉 Some apps load instantly
👉 Others take time and feel heavy

Why?

Because of bundle size.

By default, React bundles your entire app into one large file.

That means:

• More load time

• Slower performance

• Bad user experience

Today we fix this using:

✔ Code Splitting
✔ Lazy Loading

---

🤔 What is Code Splitting?

Code Splitting is the process of breaking your app into smaller chunks so they load only when needed.

Instead of loading everything at once…

👉 Load only what the user needs.

---

🧠 What is Lazy Loading?

Lazy Loading means loading components only when they are required.

For example:

• Login page → load login code

• Dashboard → load dashboard code later

---

🛠 How to Implement Lazy Loading

React provides:

👉 React.lazy()
👉 Suspense

---

✅ Step 1 — Use React.lazy

import React, { lazy } from "react";

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

---

✅ Step 2 — Wrap with Suspense

import { Suspense } from "react";

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

---

🔎 What’s Happening?

• Dashboard loads only when needed

• Until then → "Loading..." is shown

• Improves initial load time

---

🔥 Real-World Example — Route-Based Splitting

const Home = lazy(() => import("./Home"));
const Profile = lazy(() => import("./Profile"));
const Settings = lazy(() => import("./Settings"));

Each page loads separately → faster app 🚀

---

🎯 Why It Matters

✔ Faster initial load

✔ Better performance

✔ Improved user experience

✔ Smaller bundle size

---

⚠ Important Notes

✔ Always wrap lazy components in Suspense

✔ Provide meaningful fallback UI

✔ Use for large components or pages

---

🧠 One-Liner

Code splitting divides the app into smaller chunks, and lazy loading loads components only when needed using React.lazy and Suspense.

---

🔗 How It Connects

✔ Performance Optimization (Day 13, 14)

✔ Large Applications

✔ Routing (React Router)

✔ Real-world production apps

---

✅ Key Takeaways

✔ Improves app performance

✔ Reduces bundle size

✔ Loads components on demand

✔ Essential for scalable apps

---

🔜 Coming Next

Day 26 — Higher Order Components (HOC) Simplified

Now we revisit an important reusable pattern 🔥