কেন React-এ Fiber দরকার হয়েছিল

React-এর পুরোনো ভার্সনগুলোতে (React 15 এবং তার আগে) একটা সিস্টেম ব্যবহার করা হতো, যাকে বলা হয় Stack Reconciler। এটা JavaScript-এর call stack ব্যবহার করে সব আপডেট একসাথে, একটানা প্রসেস করত।

শুরুতে এটা ঠিকই কাজ করত, কিন্তু অ্যাপ বড় আর জটিল হওয়ার সাথে সাথে কিছু বড় সমস্যা দেখা দিতে থাকে।

🚨 সমস্যা ১: Main Thread ব্লক হয়ে যাওয়া

ব্রাউজারে JavaScript একটাই thread-এ চলে।

পুরোনো React-এ যখন rendering শুরু হতো:

• মাঝপথে থামানো যেত না
• বড় component tree হলে অনেক সময় লাগত
• এই সময় ব্রাউজার অন্য কিছু করতে পারত না

মানে user যদি:

• click করে
• টাইপ করে
• scroll করে
• animation দেখে

→ কিছুই ঠিকভাবে respond করত না

ফলে UI-তে lag দেখা দিত।

👉 উদাহরণ:

User কিছু টাইপ করল → React rendering শুরু করল → বড় update → UI কয়েক সেকেন্ডের জন্য আটকে গেল

🚨 সমস্যা ২: সব update একরকম ধরা হতো

পুরোনো React বুঝত না কোন কাজ বেশি গুরুত্বপূর্ণ।

কিন্তু বাস্তবে সব update সমান না:

• 🔴 Input-এ টাইপ করা → সবচেয়ে গুরুত্বপূর্ণ
• 🟡 Hidden panel update → কম গুরুত্বপূর্ণ
• 🟢 Background data load → আরও কম গুরুত্বপূর্ণ

কিন্তু তখন React:

• কম গুরুত্বপূর্ণ কাজ থামাতে পারত না
• জরুরি কাজকে আগে করতে পারত না

সব একসাথে, একবারেই করে ফেলত।

🚨 সমস্যা ৩: কাজ ভাগ করে করার কোনো ব্যবস্থা ছিল না

Browser সাধারণত প্রতি frame ~16ms সময় পায় (smooth animation এর জন্য)।

কিন্তু যদি React 40ms সময় নেয়:

• frame drop হয়
• animation কাঁপতে থাকে

সমস্যা হলো:

• কাজকে ছোট ছোট ভাগে ভাঙা যেত না
• মাঝখানে browser-কে control দেওয়া যেত না
• পরে আবার resume করা যেত না

🚀 Fiber কী পরিবর্তন নিয়ে এসেছে

Fiber আসলে React-এর rendering system পুরো নতুনভাবে লেখা (React 16-এ আসে, 2017 সালে)।

এটা React-এর কাজ করার ধরনটাই বদলে দেয়।

আগে ছিল:

“সব এখনই render করো”

এখন হলো:

“বুদ্ধিমত্তার সাথে কাজ schedule করো”

✅ ১. ধাপে ধাপে rendering (Incremental Rendering)

Fiber rendering-কে ছোট ছোট অংশে ভাগ করে।

এখন React পারে:

• কাজ শুরু করতে
• মাঝখানে pause নিতে
• browser-কে কাজ করতে দিতে
• পরে আবার resume করতে

এটাকে বলা হয় cooperative scheduling।

✅ ২. কাজের priority ঠিক করা

Fiber এখন আলাদা আলাদা priority সেট করতে পারে।

যেমন:

• User input → high priority
• UI update → medium
• Background কাজ → low

ফলে দরকার হলে কম গুরুত্বপূর্ণ কাজ থামিয়ে জরুরি কাজ আগে করা যায়।

✅ ৩. ভবিষ্যতের feature-এর ভিত্তি

Fiber আসার কারণে React-এ অনেক modern feature সম্ভব হয়েছে:

• Concurrent Rendering (React 18)
• startTransition
• Suspense আরও উন্নত হয়েছে
• Server-side rendering-এ selective hydration

Fiber না থাকলে এগুলো করা সম্ভব হতো না।

🧠 সহজভাবে বুঝলে

পুরোনো React

Rendering শুরু
↓
সব কাজ শেষ
↓
UI update

Fiber

Rendering শুরু
↓
প্রয়োজনে pause
↓
পরে আবার শুরু
↓
গুরুত্ব অনুযায়ী কাজ করা
↓
শেষে DOM update

চল তাহলে ধাপে ধাপে আরেকটু গভীরে যাই—কিন্তু আগের মতোই সহজভাবে 👇

🔍 Fiber আসলে ভেতরে কীভাবে কাজ করে

React Fiber বুঝতে হলে একটা জিনিস মাথায় রাখো:

👉 React এখন আর একবারে পুরো UI নিয়ে কাজ করে না 👉 বরং ছোট ছোট টুকরো করে কাজ করে

🧱 Fiber Node কী?

প্রতিটা component-এর জন্য React একটা আলাদা object বানায় — এটাকেই বলে Fiber Node।

সহজভাবে ভাবো:

• তোমার UI = অনেকগুলো component
• প্রতিটা component = একটা Fiber node

🔗 এগুলো কীভাবে যুক্ত থাকে?

Fiber একটা linked list / tree structure ব্যবহার করে।

প্রতিটা Fiber node-এ থাকে:

• child → তার নিচের component
• sibling → পাশের component
• return → parent component

👉 মানে এটা DOM tree-এর মতো, কিন্তু lightweight version

⚙️ React কীভাবে কাজ চালায়?

Fiber দুইটা ধাপে কাজ করে:

1️⃣ Render Phase (Calculation Phase)

এই ধাপে React:

• কী change হবে সেটা হিসাব করে
• নতুন Fiber tree বানায়
• কিন্তু এখনো DOM-এ কিছু update করে না

👉 গুরুত্বপূর্ণ:

• এই phase pause করা যায়
• interrupt করা যায়

2️⃣ Commit Phase (Apply Phase)

এই ধাপে React:

• আসল DOM update করে
• UI-তে পরিবর্তন দেখায়

👉 এটা pause করা যায় না (কারণ UI consistent থাকতে হবে)

🧵 Time Slicing আসলে কী?

এটাই Fiber-এর সবচেয়ে powerful idea।

👉 বড় কাজকে ছোট ছোট chunk-এ ভাগ করা

ধরো:

• তোমার rendering 40ms লাগবে
• Fiber এটাকে ভেঙে 5–5ms করে করে চালায়

এর মধ্যে:

• browser-কে chance দেয় (click, scroll handle করতে)
• তারপর আবার resume করে

👉 ফলে UI smooth থাকে

⏳ এটা বাস্তবে কীভাবে কাজ করে?

React browser-কে জিজ্ঞেস করে:

“তোমার কাছে কি একটু ফাঁকা সময় আছে?”

Browser যদি বলে “হ্যাঁ” → React একটু কাজ করে Browser busy হলে → React থেমে যায়

🎯 Priority কীভাবে কাজ করে?

React update-গুলোকে priority দেয়:

• 🔴 High → user typing, click
• 🟡 Medium → normal UI update
• 🟢 Low → background কাজ

👉 যদি low priority কাজ চলতে থাকে আর user click করে:

→ React সাথে সাথে low কাজ থামিয়ে → high priority কাজ আগে করে

🧠 একটা সহজ real-life example

ভাবো তুমি রান্না করছো:

পুরোনো React:

• একবার রান্না শুরু করলে
• সব শেষ না করা পর্যন্ত অন্য কিছু না

👉 ফোন বাজলেও ধরতে পারবে না 😅

Fiber:

• রান্না করছো
• মাঝখানে ফোন এলে pause
• ফোন ধরলে
• আবার রান্নায় ফিরে গেলে

👉 সবকিছু balance করে করা

🚀 React 18-এর সাথে Fiber-এর সম্পর্ক

Fiber আসার পরেই React-এ advanced feature সম্ভব হয়েছে:

🔹 Concurrent Rendering

একসাথে multiple কাজ manage করা

🔹 startTransition

কম গুরুত্বপূর্ণ update delay করা

🔹 Suspense

loading UI smartভাবে দেখানো

🎤 Interview-এর জন্য short version

যদি interview-তে জিজ্ঞেস করে:

👉 “Why Fiber?”

তুমি এভাবে বললেই enough:

React-এর পুরোনো rendering synchronous ছিল, যেটা বড় app-এ UI block করত। Fiber আসার পর React rendering-কে ছোট ছোট অংশে ভাগ করে, pause/resume করতে পারে এবং priority অনুযায়ী কাজ করতে পারে। এর ফলে UI smooth হয় এবং concurrent feature possible হয়েছে।

চল এবার একদম practical + interview-ready করে দেই — যেন তুমি পড়েও বুঝো, আবার বুঝিয়েও দিতে পারো 👇

🧪 ১. Diagram-style সহজ Visualization

ধরো তোমার UI tree এমন:

App
 ├── Header
 ├── Sidebar
 └── Content
      ├── Post1
      ├── Post2
      └── Post3

❌ পুরোনো React (Stack)

Start
 ↓
Header
 ↓
Sidebar
 ↓
Content
 ↓
Post1 → Post2 → Post3
 ↓
Finish → DOM Update

👉 সমস্যা:

• মাঝখানে থামা যায় না
• পুরো কাজ শেষ না হলে UI update না

✅ Fiber (Step-by-step)

Start
 ↓
Header (done)
 ↓
Pause ⏸ (browser event handle)
 ↓
Sidebar (done)
 ↓
Pause ⏸
 ↓
Content → Post1
 ↓
Pause ⏸ (user click)
 ↓
Handle click first 🔴
 ↓
Resume → Post2 → Post3
 ↓
Commit to DOM

👉 বুঝলে? React এখন “smart worker” হয়ে গেছে 😄

💡 ২. Real Coding Example দিয়ে বোঝা

❌ Without Fiber mindset (blocking)

function App() {
  const bigList = new Array(10000).fill(0);

  return (
    <div>
      {bigList.map((_, i) => (
        <p key={i}>{i}</p>
      ))}
    </div>
  );
}

👉 সমস্যা:

• huge render → UI freeze হতে পারে

✅ React 18 + Fiber mindset

import { startTransition, useState } from "react";

function App() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;

    // High priority (typing)
    setText(value);

    // Low priority (heavy work)
    startTransition(() => {
      const bigList = new Array(10000)
        .fill(value)
        .map((item, i) => item + i);

      setList(bigList);
    });
  };

  return (
    <>
      <input value={text} onChange={handleChange} />
      {list.map((item, i) => (
        <p key={i}>{item}</p>
      ))}
    </>
  );
}

👉 এখানে কী হচ্ছে?

• input typing → fast (high priority)
• বড় list update → slow কিন্তু background-এ

👉 user experience smooth থাকে

🎯 ৩. Interview Trap Questions + Smart Answers

❓ Q1: Fiber কি Virtual DOM replace করেছে?

👉 উত্তর:

না, Fiber Virtual DOM replace করে নাই। Fiber আসলে reconciliation process (diffing + scheduling) নতুনভাবে implement করেছে।

❓ Q2: Fiber asynchronous নাকি synchronous?

👉 উত্তর:

• Render phase → async (pause/resume করা যায়)
• Commit phase → sync (একবারে হয়)

❓ Q3: Fiber কেন দরকার ছিল এক লাইনে?

👉 উত্তর:

UI blocking সমস্যা দূর করে smooth, interruptible rendering করার জন্য।

❓ Q4: Time slicing কী?

👉 উত্তর:

বড় rendering কাজকে ছোট ছোট অংশে ভাগ করে browser-কে মাঝে মাঝে control দেওয়া।

❓ Q5: Priority handling কীভাবে improve হয়েছে?

👉 উত্তর:

Fiber update-গুলোকে priority দেয় এবং low priority কাজ interrupt করে high priority আগে execute করে।

🧠 শেষ কথা (Super simple memory trick)

👉 একটা লাইন মনে রাখো:

“Fiber মানে React এখন pause করতে পারে, priority বুঝে কাজ করে”

🔥 Bonus (তুমি অন্যদের বুঝাতে পারবে এভাবে)

👉 যদি কাউকে বুঝাতে হয়:

আগে React ছিল একদম “একটানা কাজ করা worker” এখন Fiber আসার পর হয়েছে “smart worker” — কাজ থামায়, আগে-পরের গুরুত্ব বোঝে, তারপর করে