Rendering Trigger (রেন্ডারিং ট্রিগার)

React অ্যাপ্লিকেশন যখন প্রথম শুরু হয় বা কোনো আপডেট হয় তখন রেন্ডারিং ট্রিগার হয়। এটি দুটি কারণে হতে পারে:

উদাহরণ:

import React, { useState } from "react";
 
function ExampleComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}
 
export default ExampleComponent;

Initial Render (প্রথমবারের রেন্ডার):

এখানে যখন তুমি অ্যাপ্লিকেশন প্রথমবার রান করবে, তখন ReactDOM.render() কল হবে এবং পুরো কম্পোনেন্ট একবারে রেন্ডার হবে। এটি শুরুতে একবারই ঘটে, যেটাকে initial render বলা হয়। আমাদের উদাহরণে, ExampleComponent প্রথমবার রেন্ডার হবে এবং ব্রাউজারে "Count: 0" দেখাবে।

State Update (স্টেট আপডেট হওয়া):

এখন তুমি যদি Increase Count বোতামটি চাপো, তাহলে setCount মেথডের মাধ্যমে স্টেট পরিবর্তন হবে। প্রতিবার এই স্টেট আপডেট হলে, React পুনরায় ওই কম্পোনেন্টকে রেন্ডার করবে। এটাকেই আমরা re-render বলি।

React জানে যে শুধু স্টেট পরিবর্তন হয়েছে, তাই শুধুমাত্র সেই অংশেই নতুন করে রেন্ডার করা হবে যেখানে পরিবর্তন হয়েছে।

Rendering Phase (রেন্ডারিং ফেজ)

যখন রেন্ডারিং ট্রিগার হয়, React বুঝতে শুরু করে কোথায় কোথায় পরিবর্তন হচ্ছে। এটি করে diffing অ্যালগরিদমের মাধ্যমে।

উদাহরণ:

function ParentComponent() {
  const [isVisible, setIsVisible] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Child Component
      </button>
      {isVisible && <ChildComponent />}
    </div>
  );
}
 
function ChildComponent() {
  return <p>Hello, I am the Child Component!</p>;
}

• প্রথমবারে ParentComponent রেন্ডার হয় এবং ChildComponent দেখায় না কারণ isVisible এর প্রাথমিক মান false।
• যখন তুমি Toggle Child Component বোতামটি চাপো, isVisible স্টেট আপডেট হয় এবং তখন ChildComponent রেন্ডার হবে।

Recursive Rendering: React যখন একটি কম্পোনেন্টকে রেন্ডার করে, যদি সেই কম্পোনেন্টের মধ্যে অন্য কোনো কম্পোনেন্ট থাকে, তাহলে সেটাও রেন্ডার হবে। এভাবেই রেন্ডারিং প্রসেসটি রিকারসিভলি কাজ করে। উদাহরণ হিসেবে, ParentComponent রেন্ডার হওয়ার পর, যদি isVisible true হয়, তখন ChildComponent রেন্ডার হবে।

Commit Phase (কমিট ফেজ)

রেন্ডারিং ফেজে React শুধু ভার্চুয়াল DOM-এ কাজ করে, এবং কোথায় কোথায় পরিবর্তন হয়েছে তা নির্ধারণ করে। এবার যখন রেন্ডারিং ফেজ শেষ হয়ে যায়, তখন React বাস্তব DOM-এ সেই পরিবর্তনগুলি প্রতিফলিত করে, যেটাকে আমরা commit ফেজ বলি।

উদাহরণ:

function ColorChanger() {
  const [color, setColor] = useState("red");
 
  return (
    <div>
      <p style={{ color }}>This text is {color}</p>
      <button onClick={() => setColor("blue")}>Change to Blue</button>
    </div>
  );
}

• প্রথমবার রেন্ডার হওয়ার সময় p ট্যাগের টেক্সটটি লাল রঙে থাকবে।
• যখন তুমি Change to Blue বোতামটি চাপবে, setColor এর মাধ্যমে স্টেট আপডেট হবে, এবং React ভার্চুয়াল DOM-এ দেখবে যে শুধুমাত্র রঙ পরিবর্তন হয়েছে। এরপর commit ফেজে এসে শুধুমাত্র p ট্যাগের রঙ পরিবর্তন হবে, অন্য কোনো DOM নোড পরিবর্তন হবে না।

React জানে কোথায় কোথায় পরিবর্তন হয়েছে এবং শুধুমাত্র সেই অংশগুলিকেই real DOM-এ আপডেট করে।