Hey buddy, how are you all? 👋
Did you notice how some apps load super fast despite being huge?
That’s the Magic of Lazy Loading ! Happening Behind the Website 🪄
Let me take you through everything — step by step — like a tech Expert 💻🦸
🧠 What is Lazy Loading So Important?
Imagine you’re reading a 500-page book 📘.
Can you open all the Pages at once? Not possible, Right?
You read all the pages one by one at a time
That’s what Lazy Loading does in React.js.
🔁 In Easy Way, it means: “Load stuff only when we need it.”
🧐 Why Lazy Loading is Super Useful in React JS?
Let’s imagine your App has:
- A Home page
- A Dashboard
- A Settings panel
- A Chat module
- A Long Blog Section
If you load everything upfront, it becomes:
❌ Slow Loading Speed
❌ Heavy File Size
❌ Frustrating for users
Rather than that, you can use Lazy Loading, which makes it:
✅ Super Fast ⏩
✅ Light 🪶
✅ Be Smart 🤖
💡 Understand with a Real-Life Example
When you visit an e-commerce Website.
The Product page loads first — as Super Fast, you always feel this im Right ?.
Only when you click the “Cart” button does React load the Cart component on the DOM.
Boom 💥! That’s lazy loading in action.
🔧 How can you Implement Lazy Loading in React?
Let’s learn by doing! This remarkable thing is in your React Application or website.
Step 1️⃣: First, use React.lazy()
Use the below Refrance Code:
import React, { Suspense } from 'react';
// 👇 Lazy load the Cart component
const Cart = React.lazy(() => import('./Cart'));
Does it look very easy?
Step 2️⃣: Then Wrap It with the <Suspense> Tag
Example:
function App() {
return (
<div>
<h1>🛒 Welcome to the Store!</h1>
<Suspense fallback={<div>Loading Cart... ⏳</div>}>
<Cart />
</Suspense>
</div>
);
}🎯 <Suspense> is React’s Way of saying:
“Hey! While loading this component, show this loading message.”
📊 Visual Flow of Lazy Loading
- When an App starts ➡️ Only the Home component loads
- When the User clicks Cart ➡️, then the Cart component starts loading
- While loading ➡️ Show spinner or text
- When it’s loaded ➡️ Then we can display the Cart
🛠️ Where Can You Use Lazy Loading in React?
- 💼 Dashboards with many widgets
- 📸 Image galleries (load images on scroll)
- 🎞️ Videos or animations
- 📚 Large documentation pages
- 🛍️ E-commerce apps
- 💼 Blog Website with lots of Blogs
🤯 Bonus Tip for you: Lazy Loading with react-router-dom
Are you also using routes? Let’s optimise those too with Lazy Loading!
Step-by-Step Code to Use Lazy Loading in React-Router-Dom
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home'));
const Contact = lazy(() => import('./Contact'));
const About = lazy(() => import('./About'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>Loading Page... ⏳</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}✅ Now, routes will load only when a user visits them. Otherwise, it will load
Fast and efficient! 🏎️💨 Way to make Rocket-like Speed Websites
🖼️ Placeholder: Infographic – “Lazy Loading vs Eager Loading”
Lazy LoadingEager Loading
Loads only when needed ⏳ Loads everything upfront 🧱
Faster initial load 🚀 Slower initial load 🐌
Suitable for large apps 📦 Fine for small apps 🔸
Saves bandwidth 📶 Consumes more data 📡
💬 Common Questions
❓ Can I lazy load multiple components?
Yes! Use React.lazy() for each one separately, as needed.
❓ What happens if loading fails?
You can use ErrorBoundary to catch all errors and show a fallback UI. Like we show in the example code snippet below
Class ErrorBoundary extends React. Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong. 😞</h2>;
}
Return this. Props.children;
}
}Then you need to wrap it:
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</ErrorBoundary>🧪 Pro Tips for Pro Developers
- You can keep your components small and modular 🧩
- Lazy load only big or rarely used components
- Combine with code splitting for even more performance!
🏁 Final Thoughts on this Awsome Guide
Now I’m 100% Sure that if you use the Lazy Loading, you feel like a Magic 🪄 Happening in your App, you think your app website feels like a Rocket Fast Loading.
👉 Want More Awesome Tutorials?
🔔 Subscribe to stay updated!
🎥 YouTube: @web_codder
📸 Instagram: web_codder_official