React-এ Virtual DOM কী এবং কিভাবে কাজ করে?

Virtual DOM, আমাদের ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন অনেকগুলো HTML এলিমেন্ট দিয়ে তৈরি। যেমন, হেডার, প্যারাগ্রাফ, ছবি, বাটন ইত্যাদি।

তুমি যখন ব্রাউজারে কোনো ওয়েবসাইট দেখো, তখন সেই HTML কোড ব্রাউজার DOM (Document Object Model) এ রূপান্তর করে। DOM হলো ওয়েবপেজের একটা কাঠামো বা ট্রি, যা ব্রাউজার বুঝতে পারে।

DOM এর কাজ

DOM হচ্ছে সেই কাঠামো যার ওপর ব্রাউজার ওয়েবপেজের ডিজাইন, লেআউট, এবং ফাংশনালিটি তৈরি করে।

• এটা একটা ট্রি স্ট্রাকচার যেখানে প্রত্যেকটা HTML এলিমেন্ট একটা নোড।
• জাভাস্ক্রিপ্ট দিয়ে এই DOM কে পরিবর্তন করা যায়। যেমন, কোনো বাটনে ক্লিক করলে DOM এর কিছু অংশ পরিবর্তন করা।

কিভাবে DOM পরিবর্তন হয়?

তুমি যদি JavaScript দিয়ে DOM ম্যানিপুলেট করো, যেমন একটা বাটনের ক্লিক হ্যান্ডলার দিয়ে <h1> ট্যাগের লেখা বদলো, তাহলে ব্রাউজার DOM আপডেট করবে।

২. DOM পরিবর্তনের সমস্যা কী?

এখন একটা বিষয় ভাবো – ধরো তোমার ওয়েব অ্যাপ্লিকেশন বড়। সেখানে অনেকগুলো DOM এলিমেন্ট আছে।

যখন তুমি ছোটো একটি পরিবর্তন করবে, যেমন শুধু একটা বাটনের টেক্সট বদলাবে, তখন পুরো DOM-টাই আবার আপডেট হয়ে গেলে কী হবে?

• ব্রাউজারকে খুব বেশি কাজ করতে হবে।
• ওয়েবপেজ ধীর হয়ে যাবে।
• ইউজার ইন্টারফেস স্লো এবং অপ্রতিক্রিয়াশীল লাগবে।

এটা ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্সের জন্য খুব খারাপ।

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

৩. Virtual DOM কী?

এই সমস্যার সমাধান হিসেবে React এসেছে Virtual DOM নিয়ে।

Virtual DOM হলো একটি হালকা ওজনে JavaScript অবজেক্ট, যা আসলে মূল DOM এর একটি কপি।

React যখন তোমার UI তৈরি করে, তখন প্রথমে Virtual DOM তৈরি করে, যা পুরো UI এর একটি অবজেক্ট ভার্সন।

যখন তোমার অ্যাপের state বা props পরিবর্তন হয়, React নতুন Virtual DOM তৈরি করে।

তারপর React পুরানো Virtual DOM আর নতুন Virtual DOM এর মধ্যে পার্থক্য (diff) করে।

অবশেষে, React শুধু সেই অংশগুলোই রিয়েল DOM-এ আপডেট করে যা বদলেছে।

সহজ কথায় Virtual DOM হলো একটা “মিরর” বা আয়না, যেখানে React UI এর বর্তমান অবস্থা রাখে। যখন কিছু বদল হয়, React প্রথমে এই আয়নায় পরিবর্তন দেখে, তারপর আসল জায়গায় পরিবর্তন করে।

৪. React এ Virtual DOM কাজ করার ধাপগুলো কী?

চল তোমাকে React Virtual DOM কিভাবে কাজ করে তার ধাপ গুলো সহজ ভাষায় বলি:

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

React প্রথমে তোমার কম্পোনেন্ট থেকে Virtual DOM তৈরি করে। এটি আসলে UI এর একটা জাভাস্ক্রিপ্ট অবজেক্ট।

ধাপ ২: State বা Props পরিবর্তন (Data Change)

যখন তোমার অ্যাপে কোনো state বা props পরিবর্তন হয়, React নতুন Virtual DOM তৈরি করে।

ধাপ ৩: পুরানো এবং নতুন Virtual DOM এর তুলনা (Diffing)

React পুরানো Virtual DOM এবং নতুন Virtual DOM কে তুলনা করে। এই প্রক্রিয়াকে বলে diffing। এই diffing প্রক্রিয়া React কে বলে যে কোন কোন অংশ UI তে পরিবর্তন হয়েছে।

ধাপ ৪: রিয়েল DOM-এ ন্যূনতম পরিবর্তন (Minimal DOM Update)

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

৫. Virtual DOM ব্যবহার করলে কী লাভ?

• দ্রুত ও স্মুথ UI: শুধু যেটুকু বদলেছে সেটুকু আপডেট হওয়ায় UI দ্রুত রিফ্রেশ হয়।
• পারফরম্যান্স বাড়ে: কম DOM ম্যানিপুলেশন মানে ব্রাউজার দ্রুত কাজ করে।
• স্মার্ট আপডেট: React নিজেই দেখে কোন কোন এলিমেন্ট বদলেছে, ডেভেলপারকে হাত লাগাতে হয় না।
• ক্রস-প্ল্যাটফর্ম: React Native-সহ অন্য অনেক প্লাটফর্মে Virtual DOM এর ধারণা কাজ করে।

৬. Virtual DOM সম্পর্কে সহজ উদাহরণ

ধরো তুমি একটা ছোট Counter অ্যাপ তৈরি করেছো:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

এই অ্যাপে যখন তুমি “Increase” বাটনে ক্লিক করবে, তখন কেবল <h1> এর সংখ্যা পরিবর্তন হবে।

তবে পুরো DOM-টাই না, React শুধু Virtual DOM এর মধ্যে নতুন অবস্থা তৈরি করে, পুরাতন অবস্থা সাথে তুলনা করে, তারপর শুধু সংখ্যাটা যেটা <h1> তে আছে সেটাই রিয়েল DOM-এ আপডেট করে।

এটাই React কে দ্রুত ও স্মুথ করে।

৭. Virtual DOM এবং React এর Diffing Algorithm

React Virtual DOM এর শক্তি হলো এর Diffing Algorithm।

কোনো UI পরিবর্তন হলে React আগের Virtual DOM আর নতুন Virtual DOM তুলনা করে দেখে কোন কোন অংশ পরিবর্তন হয়েছে।

• যদি একই ধরনের এলিমেন্ট থাকে, React তাদের প্রপার্টি চেক করে।
• যদি এলিমেন্টের টাইপ পরিবর্তিত হয়, React পুরানোটা মুছে নতুনটা তৈরি করে।
• React কম্পোনেন্ট ভিত্তিক কাজ করে, তাই প্রতিটি কম্পোনেন্টের Virtual DOM আলাদা থাকে।

এই diffing প্রক্রিয়া React কে অনেক দ্রুত UI আপডেট করতে সাহায্য করে।

৮. React Fiber: Virtual DOM এর উন্নত সংস্করণ

React 16 থেকে React Fiber আর্কিটেকচার এসেছে, যা Virtual DOM এর কাজকে আরো স্মুথ এবং দ্রুত করেছে।

Fiber হলো React এর নতুন রেন্ডারিং ইঞ্জিন, যা বড় বড় UI পরিবর্তনগুলোকে ছোট ছোট টুকরো করে ভাগ করে কাজ করতে পারে।

ফলাফল, UI যখন বড় হয়, React ততটা দ্রুত কাজ করতে পারে এবং ইউজার ইন্টারফেস স্মুথ থাকে।

৯. Virtual DOM আর Real DOM এর পার্থক্য

বিষয়	Real DOM	Virtual DOM
বাস্তব অবজেক্ট	ব্রাউজারের DOM	জাভাস্ক্রিপ্ট অবজেক্ট
আপডেট স্পিড	ধীর	দ্রুত
আপডেট স্কোপ	পুরো DOM	শুধু পরিবর্তিত অংশ
ব্যবহৃত হয়	ওয়েব পেজে	React ইন্টারনালি
কাজের ধরন	ভারি (Heavy)	হালকা (Lightweight)

১০. Virtual DOM এর সাথে React Hooks এর সম্পর্ক

React Hooks (যেমন useState, useEffect) যখন state বা lifecycle পরিবর্তন ঘটায়, React নতুন Virtual DOM তৈরি করে।

তারপর React আগের Virtual DOM এর সাথে তুলনা করে, এবং যেগুলো বদলেছে সেগুলো Real DOM-এ আপডেট করে।

তাই React Hooks এবং Virtual DOM একসাথে React কে শক্তিশালী ও স্মুথ UI বানাতে সাহায্য করে।

১১. Virtual DOM নিয়ে সাধারণ কিছু ভুল ধারনা

• Virtual DOM কোনো HTML বা ব্রাউজারের DOM নয়, এটি কেবল একটা জাভাস্ক্রিপ্ট অবজেক্ট।
• Virtual DOM সবসময় পুরো DOM কে আপডেট করে না, কেবল যেটুকু পরিবর্তন প্রয়োজন সেটুকুই আপডেট করে।
• Virtual DOM React এর পারফরম্যান্সের একমাত্র কারণ নয়, React এর অন্যান্য অপ্টিমাইজেশনও আছে।

কেন Virtual DOM React-এ এত গুরুত্বপূর্ণ?

ওয়েব ডেভেলপমেন্টের শুরু থেকেই DOM manipulation একটি বড় চ্যালেঞ্জ ছিল। প্রচলিত পুরনো ওয়েব ফ্রেমওয়ার্কগুলো সরাসরি Real DOM-এ কাজ করত। অর্থাৎ, ইউজার যখন কোনো কাজ করত, যেমন বাটনে ক্লিক করা বা ডাটা পরিবর্তন, তখন সেই পরিবর্তনগুলো সরাসরি ব্রাউজারের DOM-এ প্রতিফলিত হতো।

Real DOM-এ সরাসরি কাজ করার সমস্যা

Real DOM হলো ব্রাউজারের ওয়েবপেজের মূল কাঠামো। যখন এটিতে কোনো পরিবর্তন হয়, ব্রাউজারকে পুরো DOM আপডেট করতে হয়, যেটা অনেক সময় ও রিসোর্স নেয়। বিশেষ করে বড় বড় ওয়েব অ্যাপে, যেখানে হাজার হাজার DOM এলিমেন্ট থাকে, প্রতিবার ছোট একটা পরিবর্তন করলে পুরো DOM আপডেট হলে:

• পারফরম্যান্স মারাত্মকভাবে কমে যায়।
• ওয়েবসাইট ধীর বা স্লো হয়ে যায়।
• ইউজার এক্সপিরিয়েন্স খারাপ হয়, কারণ UI ধীরে রিফ্রেশ হয় বা জবাব দেয় না।
• ব্রাউজারের CPU এবং মেমোরি বেশি ব্যবহার হয়, যা ডিভাইসের রিসোর্স ব্যর্থ করে দিতে পারে।

এমন পরিস্থিতি ওয়েব অ্যাপের সাফল্যের জন্য বড় ঝুঁকি।

React-এর Virtual DOM আসলে কীভাবে সমস্যার সমাধান করেছে?

React Virtual DOM নিয়ে এসেছে একটি মাঝারি স্তরের মধ্যস্থতা, যেখানে React DOM-এর পুরো কপি তৈরি করে জাভাস্ক্রিপ্ট অবজেক্ট হিসেবে রেখে দেয় — এটাকে বলে Virtual DOM।

• যখন কোনো পরিবর্তন হয়, React প্রথমে এই Virtual DOM এর মধ্যে নতুন ভার্সন তৈরি করে।
• React তখন পুরানো Virtual DOM এবং নতুন Virtual DOM এর মধ্যে পার্থক্য খুঁজে বের করে, যাকে বলা হয় diffing।
• তারপর React কেবলমাত্র যেসব অংশ বদলেছে, সেগুলোই আসল Real DOM-এ আপডেট করে।

এই পদ্ধতি অনেক দ্রুত এবং স্মার্ট, কারণ:

1. কম DOM অপারেশন: DOM manipulation সবচেয়ে সময় সাপেক্ষ কাজ, তাই যত কম DOM আপডেট করবে তত দ্রুত কাজ করবে। React কেবল বদলানো অংশ আপডেট করে বাকি আগের মতো রেখে দেয়।
2. দ্রুত UI আপডেট: React এর ডিফিং অ্যালগোরিদম দিয়ে দ্রুত কোন জায়গায় পরিবর্তন এসেছে সেটা খুঁজে পেয়ে দ্রুত রেন্ডারিং হয়।
3. পারফরম্যান্স অপটিমাইজেশন: React-এ অনেক বিল্ট-ইন অপ্টিমাইজেশন আছে যা Virtual DOM এর সঙ্গে কাজ করে পারফরম্যান্স বাড়ায়। যেমন shouldComponentUpdate, React.memo, useMemo ইত্যাদি।

সহজ উদাহরণ দিয়ে বুঝি:

ধরো তোমার ওয়েব অ্যাপের একটা পেজে ১০০০ টা এলিমেন্ট আছে। যদি তুমি কোনো একটা বাটনে ক্লিক করো এবং React যদি পুরো ১০০০ এলিমেন্টের DOM আবার তৈরি করে, তাহলে অনেক সময় লাগবে।

কিন্তু Virtual DOM থাকার কারণে React প্রথমে Virtual DOM-এ ১০০০ এলিমেন্টের একটা “copy” রাখে। তুমি যখন বাটনে ক্লিক করো, React নতুন Virtual DOM তৈরি করে এবং আগের ভার্সনের সাথে শুধু বদলানো অংশ (ধরা যাক ১ টা এলিমেন্ট) তুলনা করে চিনে নেয়। তারপর React শুধু ওই ১ টা এলিমেন্টকে Real DOM-এ আপডেট করে।

React এর Virtual DOM ব্যবহারের গুরুত্ব

React কে অন্যান্য ফ্রেমওয়ার্কের থেকে আলাদা করে এবং জনপ্রিয় করে তোলে।

বড় অ্যাপ্লিকেশনেও দ্রুত পারফরম্যান্স বজায় রাখে।

ডেভেলপারদের সহজে স্কেলেবল ও মেইনটেইনযোগ্য কোড লিখতে দেয়।

ইউজারদের স্মুথ, রেসপন্সিভ ইন্টারফেস উপহার দেয়।

১৩. Virtual DOM এর সীমাবদ্ধতা ও কনসিডারেশন

• বড় বড় UI থাকলে Virtual DOM ডিফিংয়ে কিছুটা সময় লাগতে পারে।
• অনেক frequent state আপডেট করলে পারফরম্যান্স কমে যেতে পারে।
• তাই React এ ডেভেলপারদের কোড অপ্টিমাইজ করতে হয়। যেমন: React.memo, useMemo, useCallback ব্যবহার।

Virtual DOM অন্য ফ্রেমওয়ার্কে?

Vue.js, Angular এবং Svelte (যদিও একটু ভিন্ন পদ্ধতি) এই ধারণা ব্যবহার করে। তবে React-এ সবচেয়ে বেশি পরিচিত।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন