React Reconciliation: ঝগড়া মিটানোর টেকনিক

React হলো এমন এক অসাধারণ লাইব্রেরি, যা দিয়ে ডেভেলপাররা ইউজার ইন্টারফেস তৈরি করে। কিন্তু তুমি কি জানো, React এর মধ্যে এক ধরণের "ঝগড়া" হয় প্রতিবারই..

আরিফ আলমাছ

ওয়েব ডেভেলপার

📅১২ সেপ্টেম্বর, ২০২৪

Reconciliation কি?

Reconciliation হলো সেই প্রক্রিয়া, যার মাধ্যমে React পুরোনো DOM এবং নতুন DOM এর মধ্যে পার্থক্য খুঁজে বের করে এবং যতটা কম সম্ভব DOM অপারেশন চালিয়ে UI আপডেট করে। DOM ম্যানিপুলেশন হচ্ছে একটা ধীর প্রক্রিয়া, তাই React চায় যত কম DOM পরিবর্তন করা যায়, ততই ভালো। Reconciliation প্রক্রিয়ায় React এই সমস্যার সমাধান করে ফেলে।

ধরো, তুমি একটা অ্যাপ বানিয়েছো যেখানে ইউজার কিছু টেক্সট লিখে এবং সেই টেক্সট স্ক্রিনে দেখায়। এখন ইউজার যদি শুধু একটা অক্ষর পরিবর্তন করে, তাহলে পুরো DOM আপডেট করার দরকার হয় না। React বুদ্ধি করে ঠিক সেই জায়গাটুকু চেঞ্জ করবে, যেখানে সত্যিকারের পরিবর্তন ঘটেছে। আর React এর এই বুদ্ধি কাজ করে Reconciliation প্রক্রিয়ায়।

React এর Virtual DOM ও Reconciliation

Reconciliation বুঝতে হলে প্রথমে Virtual DOM সম্পর্কে জানতে হবে। React সরাসরি ব্রাউজারের DOM এর সাথে কাজ করে না। React এর আছে নিজের একটা ভার্চুয়াল (অবাস্তব) DOM, যা মূল DOM এর একটি হালকা সংস্করণ। যখনই React ভাই নতুন আপডেট পায়, সে প্রথমে Virtual DOM এ সেই পরিবর্তনগুলো প্রক্রিয়া করে।

Virtual DOM কিভাবে কাজ করে?

1. React প্রথমে পুরো UI এর একটা ভার্চুয়াল কপি তৈরি করে (Virtual DOM)।

2. যখন কোনো ডাটা পরিবর্তন হয়, তখন React পুরনো Virtual DOM এবং নতুন Virtual DOM এর মধ্যে তুলনা করে।

3. React পরিবর্তনের অংশগুলো খুঁজে বের করে এবং আসল DOM এ শুধু সেই অংশগুলোই আপডেট করে।

এই তুলনা করার প্রক্রিয়াই হলো Reconciliation। React খুবই চতুর ভাবে বুঝে ফেলে, কোথায় কোথায় DOM পরিবর্তন করতে হবে।

React কিভাবে Reconciliation করে?

React Reconciliation এর মূল মন্ত্র হলো "ডিফিং" (diffing) প্রক্রিয়া। diffing মানে পুরনো ভার্চুয়াল DOM এবং নতুন ভার্চুয়াল DOM এর মধ্যে পার্থক্য খুঁজে বের করা। React এই ডিফিং এলগরিদম দিয়ে DOM এর একটা অংশকে চেঞ্জ করার সিদ্ধান্ত নেয়।

React সাধারণত দুইটা কাজ করে Reconciliation এর সময়:

1. DOM এর এলিমেন্ট বদলানো: যখন React বুঝতে পারে, একটা এলিমেন্ট পুরনো DOM এ ছিল, কিন্তু নতুন DOM এ নেই, তখন React সেটা DOM থেকে সরিয়ে দেয়। আবার নতুন DOM এ নতুন কিছু যোগ হলে সেটা DOM এ ঢুকিয়ে দেয়। এটা যেন React এর মাইন্ড গেম—কী বদলেছে, সেটা দ্রুত খুঁজে বের করা।

2. Component Update: যখন কোনো কম্পোনেন্টের স্টেট বা প্রপস পরিবর্তন হয়, React দেখে যে নতুন প্রপস দিয়ে কম্পোনেন্ট আপডেট করতে হবে কিনা। যদি দরকার হয়, তাহলে React আবার রেন্ডার করে, আর যদি না হয়, তাহলে আগের কম্পোনেন্টটাই রেখে দেয়। এটা ঠিক যেমন পুরনো বন্ধুকে নতুনের সাথে তুলনা করে সিদ্ধান্ত নেওয়া—পুরনোটা থাকবে না নতুনটা!

Reconciliation এর কিছু মজার উদাহরণ

ধরো, তুমি React দিয়ে একটা টুডু লিস্ট অ্যাপ বানিয়েছো। লিস্টে নতুন আইটেম যোগ করলে React কীভাবে সেই আইটেমটাকে DOM এ যোগ করে? Reconciliation প্রক্রিয়ায় React বুঝতে পারে যে শুধু লিস্টের শেষ অংশটা আপডেট করতে হবে, পুরো লিস্টটা নয়।

function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

এখানে key দিয়ে React কে বলে দেওয়া হয়, প্রতিটি আইটেম আলাদা। যখন কোনো আইটেম যোগ হয়, React শুধু নতুন আইটেমটাকে DOM এ ঢুকায়, পুরো লিস্টকে নয়। এই কাজটাই React চমৎকারভাবে Reconciliation এর মাধ্যমে করে।

React এর Key এর গুরুত্ব

Reconciliation এর ক্ষেত্রে key একটা গুরুত্বপূর্ণ ভূমিকা পালন করে। যখনই তুমি কোনো লিস্ট রেন্ডার করো, React কে key দিয়ে বলো যে কোন আইটেম কোনটা। যদি key না থাকে, তাহলে React প্রতিবার লিস্টের সব এলিমেন্টকে ধরে ধরে দেখে। key থাকলে React দ্রুত বুঝে যায়, কোনটা বদলেছে আর কোনটা আগের মতোই আছে।

function ItemList({ items }) {
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

এখানে প্রতিটি আইটেমের id দিয়ে React কে বুঝিয়ে দেওয়া হয়েছে, কোনটা নতুন আর কোনটা পুরনো। Reconciliation প্রক্রিয়ায় React এবার সহজেই বুঝতে পারবে, কোন অংশটা আপডেট করতে হবে।

React Reconciliation এর সুবিধা

1. দ্রুত আপডেট: React খুব দ্রুত কাজ করে, কারণ সে শুধুমাত্র পরিবর্তিত অংশগুলো DOM এ আপডেট করে।
2. পারফরম্যান্স বুস্ট: DOM ম্যানিপুলেশন খুব ধীর, কিন্তু Reconciliation এর মাধ্যমে React DOM এর উপর কাজ কমিয়ে আনে, ফলে অ্যাপের পারফরম্যান্স অনেক ভালো হয়।
3. অপটিমাইজড UI আপডেট: React এমনভাবে কাজ করে, যেন যত কম সম্ভব DOM অপারেশন করতে হয়।

শেষ কথা: React ভাই এর ঝগড়া মিটানোর গোপন টেকনিক

React এর Reconciliation প্রক্রিয়া হলো এক চমৎকার এলগরিদম, যা খুব দ্রুত পুরনো এবং নতুন DOM এর মধ্যে পার্থক্য খুঁজে বের করে এবং সেই অনুযায়ী DOM আপডেট করে। React এ কাজ করার সময় তুমি হয়তো এটা খেয়াল করো না, কিন্তু React প্রতিবারই তোমার কোডে ঘটে যাওয়া পরিবর্তনগুলো খুব মসৃণভাবে হ্যান্ডেল করে, যেন কোনো ঝামেলা না হয়। Reconciliation এর ম্যাজিকের কারণে React এত দ্রুত আর পারফর্ম্যান্সে ভালো!

এটা ঠিক React ভাই এর ঝগড়া মিটানোর টেকনিক—একটা শান্তিপূর্ণ প্রক্রিয়া, যেখানে নতুন আর পুরনো DOM মিলে যায় একদম শান্তভাবে!