Virtual DOM (VDOM) एक हल्का JavaScript ऑब्जेक्ट ट्री है जो बताता है कि UI कैसा दिखना चाहिए। यह एक साधारण इन-मेमोरी प्रतिनिधित्व है — असली ब्राउज़र DOM नहीं। React इसका उपयोग करता है क्योंकि सीधे असली DOM में हेराफेरी करना धीमा है, और हर state परिवर्तन पर इसे मैन्युअली करना त्रुटि-प्रवण है।
जब state बदलता है, तो React तुरंत पृष्ठ को छुता नहीं है। इसके बजाय यह:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
तो आप घोषणात्मक तरीके से कोड लिखते हैं ("इस state के लिए UI इस तरह दिखता है") और React आपके लिए अनिवार्य DOM संचालन का पता लगाता है।
document.querySelector + म्यूटेट करने की तुलना में समझने में आसान है।