🧑‍🏫 React Lazy Loading

ভাবুন আপনি বলছেন —

“দোস্ত, জানো তো, আমরা যখন অ্যাপ বানাই, তখন সব কম্পোনেন্ট একসাথে ইম্পোর্ট করি। কিন্তু সব সময় তো ইউজার সব পেইজে যায় না, তাই না?”

এই চিন্তা থেকেই আসে 👉 Lazy Loading — যেটা বলে:

"যখন দরকার তখনই লোড করো, আগে না।"

🔥 আসল সমস্যা কী?

React এ আমরা সাধারণত সব কম্পোনেন্ট একসাথে ইম্পোর্ট করি:

import MarkdownPreview from "./MarkdownPreview.js";

তাতে হয় কী?

• পুরো অ্যাপ একসাথে বান্ডেল হয়
• প্রথমবার সাইট খোলার সময় সব কিছুই ডাউনলোড হয়
• ইউজার হয় বিরক্ত 😫

💡 সমাধান: Lazy Loading

React আমাদের জন্য দিয়েছে 👉 React.lazy() যেটা বলে: “আমি কম্পোনেন্ট তখনই ইম্পোর্ট করব, যখন ইউজার ওটা দেখতে চাইবে।”

🚀 ধাপে ধাপে Lazy Loading শেখা যাক

🧩 Step 1: Lazy করে কম্পোনেন্ট ইম্পোর্ট

import { lazy } from "react";
 
const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

💡 মনে রাখো:

• এই import() asynchronous
• তাই এটা তখনই কাজ করবে, যদি তুমি এটাকে Suspense দিয়ে wrap করো

🧩 Step 2: Suspense দিয়ে ধরো

import { Suspense } from "react";
 
<Suspense fallback={<p>⏳ Loading...</p>}>
  <MarkdownPreview markdown="Hello, **world**!" />
</Suspense>;

📌 এই fallback UI হচ্ছে আপনার loading spinner বা skeleton। MarkdownPreview যতক্ষণ না আসছে, React এই fallback দেখাবে।

🎮 চল একটা বাস্তব উদাহরণ বানাই

✅ আপনি চাইছেন, Preview বাটন চাপলেই Lazy Component লোড হোক

import React, { lazy, Suspense, useState } from "react";
 
const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));
 
function App() {
  const [showPreview, setShowPreview] = useState(false);
 
  return (
    <div>
      <h1>React Lazy Loading Example</h1>
      <button onClick={() => setShowPreview((prev) => !prev)}>
        Toggle Preview
      </button>
      <hr />
      {showPreview && (
        <Suspense fallback={<p>🌀 Loading preview...</p>}>
          <h2>Preview</h2>
          <MarkdownPreview markdown="Hello, **world**!" />
        </Suspense>
      )}
    </div>
  );
}

🎯 এখন কী হবে?

• প্রথমে MarkdownPreview.js ফাইল লোড হবে না
• বাটন ক্লিক করলে React বুঝবে: ওহ! এই কম্পোনেন্ট দরকার
• তখন ফাইল ডাইনামিকালি ইম্পোর্ট হবে
• যতক্ষণ না হয়, fallback দেখাবে

💡 ছোট্ট ট্রিক: ডাইনামিকলি যেকোনো কম্পোনেন্ট লোড করো

import { lazy } from "react";
 
export function importDemo(file) {
  return lazy(() => import(`../components/${file}.js`));
}

const DemoComponent = importDemo("ColorDemo");

🧪 একটি মজার Example App

• আপনি একটা বাটনে ক্লিক করছেন
• শুধু সেই কম্পোনেন্টের ফাইলই লোড হচ্ছে
• Network ট্যাব খুলে দেখুন, বুঝতে পারবেন live!

✅ Best Practice

🛡️ ErrorBoundary ব্যবহার না করলে?

যদি লেজি ফাইল লোড না হয় (যেমন নেটওয়ার্ক error), তখন অ্যাপ ক্র্যাশ করতে পারে। এজন্য:

<ErrorBoundary>
  <Suspense fallback={<Loading />}>
    <MyLazyComponent />
  </Suspense>
</ErrorBoundary>

⚡ নেক্সট.জেএসে তাহলে দরকার নাই?

হ্যাঁ, Next.js by default route-based lazy loading করে। তবুও, যদি আপনি কোনো modal, preview, বা chart.js heavy কম্পোনেন্ট lazy করতে চান—এটা তখনও জরুরি।

🧼 সারাংশ

✍️ শেষ কথা

React Lazy Loading হচ্ছে আপনার অ্যাপকে “বুদ্ধিমান” বানানোর উপায়। যেটা বলে—“আমি সব জানি না, কিন্তু যেটুকু দরকার, ওটুকুই শিখি, তাও সময়মতো।” 😄