🧠 Virtual DOM (ভার্চুয়াল DOM)

Virtual DOM (V-DOM) হলো মূল DOM-এর (Document Object Model) একটি lightweight বা হালকা কপি, যা JavaScript এর মাধ্যমে তৈরি করা হয়। এটি মূল DOM-এর মতো দেখতে হলেও বাস্তবে এটি ব্রাউজারে রেন্ডার হয় না, বরং এটি মেমোরিতে থাকে এবং UI পরিবর্তনের সময় intermediate হিসেবে কাজ করে।

✅ কেন Virtual DOM দরকার?

মূল DOM অনেক ভারী। যখন UI-তে পরিবর্তন হয়, তখন সরাসরি মূল DOM পরিবর্তন করলে performance খারাপ হয়, কারণ:

• পুরো DOM নতুন করে রেন্ডার হয়
• DOM tree traversal করতে হয়
• DOM manipulation স্লো হয়

এই সমস্যাগুলোর সমাধানেই Virtual DOM!

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

React বা অন্য framework-এ Virtual DOM এর কাজের ধাপ:

1. UI তে পরিবর্তন এলে, প্রথমে সেটা Virtual DOM-এ reflect হয়।
2. নতুন Virtual DOM এবং পুরাতন Virtual DOM এর মধ্যে পার্থক্য (diffing) খুঁজে বের করা হয়।
3. React এর Diffing Algorithm নির্ধারণ করে, কোন অংশ বদলেছে।
4. শুধুমাত্র বদলানো অংশটি মূল DOM-এ update হয়।

এই পুরো প্রক্রিয়াকে বলে Reconciliation।

🧪 ছোট উদাহরণ:

ধরি, একটি টু-ডু লিস্ট আছে:

<ul>
  <li>ঘুমানো</li>
  <li>পড়াশোনা</li>
</ul>

এখন আপনি “ঘুমানো” এর জায়গায় “ব্যায়াম” লিখলেন।

1. এই পরিবর্তন প্রথমে Virtual DOM-এ reflect হবে।
2. Virtual DOM detect করবে যে শুধু প্রথম <li> বদলেছে।
3. শুধু সেই <li> ট্যাগটি মূল DOM-এ update হবে।

⚡️ কীভাবে Performance বাড়ায়?

• কম DOM manipulation করে
• Batch করে DOM update করে
• Frequent re-render এড়ায়

📌 Virtual DOM এর সুবিধাসমূহ:

🧠 মনে রাখার মতো কথা:

“Virtual DOM হচ্ছে এমন একটা strategy, যেটা UI পরিবর্তনকে minimum update with maximum performance এর মাধ্যমে করে ফেলে।”