রেন্ডার এবং কমিট

আপনার কম্পোনেন্টগুলো স্ক্রিনে প্রদর্শিত হওয়ার আগে, সেগুলোকে রিয়েক্ট দ্বারা রেন্ডার করা প্রয়োজন।

আপনি শিখবেন:

• রিয়েক্টে রেন্ডারিং এর অর্থ কী
• কখন এবং কেন রিয়েক্ট একটি কম্পোনেন্ট রেন্ডার করে
• স্ক্রিনে একটি কম্পোনেন্ট প্রদর্শনের জন্য জড়িত ধাপগুলি
• রেন্ডারিং সবসময় একটি ডম আপডেট তৈরি করে না কেন

আপনার কম্পোনেন্টগুলি রান্নাঘরের রাঁধুনি, উপকরণ থেকে সুস্বাদু খাবার তৈরি করছে বলে কল্পনা করুন। এই ক্ষেত্রে, React হল ওয়েটার যে গ্রাহকদের কাছ থেকে অনুরোধ গ্রহণ করে এবং তাদের অর্ডার সরবরাহ করে। এই UI অনুরোধ এবং পরিবেশন করার প্রক্রিয়াটির তিনটি ধাপ রয়েছে:

1. রেন্ডার ট্রিগার করা (অর্ডার রান্নাঘরে পৌঁছে দেওয়া)
2. কম্পোনেন্ট রেন্ডার করা (রান্নাঘরে অর্ডার প্রস্তুত করা)
3. DOM-এ কমিট করা (অর্ডার টেবিলে পরিবেশন করা)

ধাপ ১: রেন্ডার ট্রিগার করা (অর্ডার প্রসেসিং ও ডেলিভারি)

কম্পোনেন্ট রেন্ডার হওয়ার দুটি কারণ রয়েছে:

1. এটি কম্পোনেন্টের প্রাথমিক রেন্ডার।
2. কম্পোনেন্টের state আপডেট হয়েছে।

প্রাথমিক রেন্ডার

আপনার অ্যাপ শুরু হলে, আপনাকে প্রাথমিক রেন্ডার ট্রিগার করতে হবে। ফ্রেমওয়ার্ক এবং স্যান্ডবক্সগুলি কখনও কখনও এই কোডটি লুকিয়ে রাখে, তবে এটি করা হয় createRoot কল করে লক্ষ্য DOM নোড দিয়ে এবং তারপর আপনার কম্পোনেন্ট সহ এর render পদ্ধতি কল করে:

index.js

import Image from "./Image.js";
import { createRoot } from "react-dom/client";
 
const root = createRoot(document.getElementById("root"));
root.render(<Image />);

image.js

export default function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
    />
  );
}

root.render() কলটি মন্তব্য করার চেষ্টা করুন এবং কম্পোনেন্টটি অদৃশ্য হয়ে যাবে!

state আপডেট হলে পুনরায় রেন্ডার করা

কম্পোনেন্টটি প্রাথমিকভাবে রেন্ডার হয়ে গেলে, আপনি এর state আপডেট করে আরও রেন্ডারগুলি ট্রিগার করতে পারেন set ফাংশন দিয়ে। আপনার কম্পোনেন্টের state আপডেট করা স্বয়ংক্রিয়ভাবে একটি রেন্ডার সারিবদ্ধ করে। (আপনি কল্পনা করতে পারেন এটি একটি রেস্টুরেন্টের অতিথি যিনি প্রথম অর্ডার দেওয়ার পর চা, ডেজার্ট এবং বিভিন্ন জিনিস অর্ডার করছেন, তাদের তৃষ্ণা বা ক্ষুধার state-এর উপর নির্ভর করে।)

ধাপ ২: React আপনার কম্পোনেন্টগুলি রেন্ডার করে

আপনি যখন একটি রেন্ডার ট্রিগার করেন, তখন React আপনার কম্পোনেন্টগুলি কল করে যাতে এটি স্ক্রিনে কী প্রদর্শিত হবে তা নির্ধারণ করতে পারে। "রেন্ডারিং" হল React আপনার কম্পোনেন্টগুলি কল করা।

• প্রাথমিক রেন্ডারে, React মূল (root) কম্পোনেন্টটি কল করবে।
• পরবর্তী রেন্ডারগুলির জন্য, React সেই ফাংশন কম্পোনেন্টটিকে কল করবে যার state আপডেট রেন্ডারটি ট্রিগার করেছে।

এই প্রক্রিয়াটি পুনরাবৃত্তিমূলক (recursive): যদি আপডেট করা কম্পোনেন্টটি অন্য কোনো কম্পোনেন্ট রিটার্ন করে, তাহলে React পরবর্তী কম্পোনেন্টটিকে রেন্ডার করবে, এবং যদি সেই কম্পোনেন্টটি কিছু রিটার্ন করে, তাহলে সেটিও রেন্ডার হবে, এবং এভাবে এটি চলতে থাকবে। প্রক্রিয়াটি চলতে থাকবে যতক্ষণ না আর কোনো নেস্টেড (nested) কম্পোনেন্ট নেই এবং React ঠিকমতো বুঝে যায় স্ক্রিনে কী প্রদর্শিত হবে।

নিচের উদাহরণে, React বারবার Gallery() এবং Image() কল করবে:

index.js

import Gallery from "./Gallery.js";
import { createRoot } from "react-dom/client";
 
const root = createRoot(document.getElementById("root"));
root.render(<Gallery />);

Gallery.jsx

export default function Gallery() {
  return (
    <section>
      <h1>Inspiring Sculptures</h1>
      <Image />
      <Image />
      <Image />
    </section>
  );
}
 
function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
    />
  );
}

প্রাথমিক রেন্ডার চলাকালীন, React <section>, <h1>, এবং তিনটি <img> ট্যাগের জন্য DOM নোড তৈরি করবে। পুনরায় রেন্ডার করার সময়, React হিসাব করবে তাদের কোন প্রপার্টিগুলি, যদি থাকে, আগের রেন্ডার থেকে পরিবর্তিত হয়েছে। এটি সেই তথ্যের সাথে কিছুই করবে না পরবর্তী ধাপ, কমিট ফেজ পর্যন্ত।

বিপদ

রেন্ডারিং সবসময় একটি বিশুদ্ধ গণনা হওয়া উচিত:

1. একই ইনপুট, একই আউটপুট: একই ইনপুট প্রদত্ত, একটি কম্পোনেন্ট সবসময় একই JSX রিটার্ন করা উচিত। (কেউ যদি টমেটো সহ সালাদ অর্ডার করে, তাহলে তারা পেঁয়াজ সহ সালাদ পাবেন না!)
2. এটি নিজের কাজ করে: এটি রেন্ডার করার আগে থাকা কোনো অবজেক্ট বা ভেরিয়েবল পরিবর্তন করা উচিত নয়। (একটি অর্ডার অন্য কারো অর্ডার পরিবর্তন করবে না!)

অন্যথায়, আপনি বিভ্রান্তিকর বাগ এবং অবাঞ্ছিত আচরণের সম্মুখীন হতে পারেন যখন আপনার কোডবেসের জটিলতা বৃদ্ধি পায়। "Strict Mode"-এ ডেভেলপ করার সময়, React প্রতিটি কম্পোনেন্টের ফাংশন দুবার কল করে, যা বিশুদ্ধ নয় এমন ফাংশনগুলির কারণে ঘটে যাওয়া ভুলগুলি প্রকাশ করতে সাহায্য করতে পারে।

ধাপ ৩: React DOM-এ পরিবর্তনগুলি কমিট করে

আপনার কম্পোনেন্টগুলি রেন্ডার (কল) করার পর, React DOM পরিবর্তন করবে।

• প্রাথমিক রেন্ডারের জন্য, React appendChild() DOM API ব্যবহার করে সমস্ত DOM নোড স্ক্রিনে রাখবে।
• পুনরায় রেন্ডার করার সময়, React DOM-কে সর্বশেষ রেন্ডার আউটপুটের সাথে মেলাতে ন্যূনতম প্রয়োজনীয় অপারেশনগুলি প্রয়োগ করবে (রেন্ডার করার সময় গণনা করা!)।
• React শুধুমাত্র DOM নোডগুলি পরিবর্তন করবে যদি রেন্ডারগুলির মধ্যে পার্থক্য থাকে। উদাহরণস্বরূপ, এখানে একটি কম্পোনেন্ট রয়েছে যা প্রতিটি সেকেন্ডে এর প্যারেন্ট থেকে ভিন্ন প্রপস সহ পুনরায় রেন্ডার হয়। লক্ষ্য করুন আপনি <input>-এ কিছু টেক্সট যোগ করতে পারেন, এর মান আপডেট করতে পারেন, তবে কম্পোনেন্টটি পুনরায় রেন্ডার হলেও টেক্সট অদৃশ্য হয় না:

এটি কাজ করে কারণ শেষ ধাপে, React শুধুমাত্র নতুন সময় সহ <h1> এর বিষয়বস্তু আপডেট করে। এটি দেখে যে <input> শেষবারের মতো JSX-এ একই স্থানে উপস্থিত হয়েছে, তাই React <input> বা এর মানকে স্পর্শ করে না!

এপিলগ: ব্রাউজার পেইন্ট

রেন্ডারিং শেষ হওয়ার পরে এবং React DOM আপডেট করার পরে, ব্রাউজার স্ক্রিনটি পুনরায় আঁকবে। যদিও এই প্রক্রিয়াটি "ব্রাউজার রেন্ডারিং" নামে পরিচিত, তবে ডকুমেন্টেশনের মাধ্যমে বিভ্রান্তি এড়াতে আমরা এটিকে "পেইন্টিং" হিসাবে উল্লেখ করব।

রিক্যাপ

React অ্যাপে যেকোনো স্ক্রিন আপডেট তিন ধাপে ঘটে:

1. ট্রিগার
2. রেন্ডার
3. কমিট

আপনি আপনার কম্পোনেন্টগুলিতে ভুল খুঁজে পেতে Strict Mode ব্যবহার করতে পারেন। রেন্ডারিং ফলাফল আগের মতোই থাকলে React DOM-কে স্পর্শ করে না।