React Suspense & Concurrent Features Explained (বাংলায়)

React 18 এর একটি বড় পরিবর্তন হলো Suspense এবং Concurrent Features। এগুলো React অ্যাপকে আরও দ্রুত, স্মুথ এবং user-friendly করে তোলে। Suspense asynchronous কাজ চলার সময় fallback UI দেখাতে সাহায্য করে, এবং Concurrent features React-কে background-এ UI prepare করার সুযোগ দেয়, যাতে UI কখনও ফ্রিজ না করে।

---

🚀 React Suspense কী?

React Suspense হলো এমন একটি React feature যা asynchronous কাজ (যেমন: API লোড, Lazy-loaded component) চলার সময় একটি alternative UI বা fallback দেখায়। এর ফলে পুরো UI freeze না করে সুন্দরভাবে লোড হয়।

✔ Suspense দিয়ে কী করা যায়?

• Lazy-loaded component লোড হওয়ার সময় Loader দেখানো
• Async data লোড হলে fallback দেখানো
• UI smooth রাখা
• Better user experience তৈরি করা

---

📌 Suspense Basic Example (Lazy Loading)

নিচের উদাহরণে Profile component লোড না হওয়া পর্যন্ত fallback UI দেখাবে:

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

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

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

এখানে lazy() component টিকে dynamically লোড করে এবং Suspense fallback loader দেখায়।

---

⚡ React Concurrent Features কী?

React 18 দিয়ে এসেছে নতুন Concurrent Rendering Engine। এটি React-কে UI rendering এর উপর আরও intelligent decision নিতে সাহায্য করে।

✔ Concurrent Mode এর সুবিধা:

• UI কখনও ল্যাগ করে না
• Background-এ render করতে পারে
• User input কে highest priority দেয়
• Heavy rendering tasks delay করতে পারে

---

🌈 useTransition – UI Lag দূর করার Hook

useTransition এমন update কে "non-blocking" করে দেয় যেগুলো immediate প্রয়োজন নেই। এর ফলে UI responsive থাকে।

📌 Example:

import { useState, useTransition } from "react";

function App() {
  const [text, setText] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleInput = (e) => {
    startTransition(() => {
      setText(e.target.value);
    });
  };

  return (
    <div>
      <input type="text" onChange={handleInput} />

      {isPending ? <p>Updating...</p> : <p>Output: {text}</p>}
    </div>
  );
}
    

এখানে heavy update background-এ চলে এবং UI instant response দেয়।

---

🌟 useDeferredValue – Expensive UI Delay করার Hook

বড় লিস্ট বা বড় UI update ডিলে করে user input কে fast responsive রাখে।

📌 Example:

import { useState, useDeferredValue } from "react";

function SearchList({ input }) {
  const deferredValue = useDeferredValue(input);
  return <BigList filter={deferredValue} />;
}
    

এর মাধ্যমে user টাইপ করার সময় কোন delay অনুভব করবে না।

---

🛠️ Suspense দিয়ে Data Fetching

React Suspense Loading state handle করতে পারে, তবে এটি সাধারণত React Query, Relay বা Server Components এর সাথে বেশি ব্যবহৃত হয়।

<Suspense fallback={<p>Loading user...</p>}>
    <UserProfile />
</Suspense>
    

---

📚 SuspenseList – Multiple Suspense Coordination

যখন একাধিক Suspense component থাকে, SuspenseList সেগুলো নির্দিষ্ট order অনুযায়ী reveal করতে পারে।

import { Suspense, SuspenseList } from "react";

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<p>Loading A...</p>}><ComponentA /></Suspense>
  <Suspense fallback={<p>Loading B...</p>}><ComponentB /></Suspense>
</SuspenseList>
    

UI loading experience আরও smooth হবে।

---

📌 Summary (এক নজরে সবকিছু)

• Suspense → Async load চলার সময় fallback UI দেখায়
• Lazy Loading → Component on-demand লোড হয়
• useTransition → Non-blocking state update করে
• useDeferredValue → Expensive UI update delay করে
• SuspenseList → Multiple Suspense coordination
• Concurrent Mode → React কে smarter এবং faster করে

React Suspense এবং Concurrent Features modern React applications-এ smooth, fast এবং optimized user experience প্রদান করে। Student বা beginner – সবাই এই কনসেপ্ট শিখে professional level UI তৈরি করতে পারবে।