Virtual DOM

The virtual DOM is a lightweight copy of the user interface kept as JavaScript objects. When state changes, a framework such as React builds a new virtual tree, compares it with the previous one (diffing), and applies only the differences to the real DOM, a step called reconciliation.

Why it matters

Direct DOM updates are relatively expensive and error-prone to coordinate by hand. The virtual DOM lets developers describe what the interface should look like for a given state and leaves the update mechanics to the framework. It is not automatically faster than careful manual updates; its value is a simpler programming model with good-enough performance. Some frameworks, such as Svelte and Solid, avoid a virtual DOM and update the DOM directly using compile-time knowledge.

Example

Old tree:  <ul><li>A</li><li>B</li></ul>
New tree:  <ul><li>A</li><li>B</li><li>C</li></ul>

The diff finds that only a third <li> was added, so the framework inserts one element rather than rebuilding the list. Stable key values help it match items in dynamic lists.

Common mistakes

• Using array index as the key for lists that reorder, causing wrong state to stick to items.
• Assuming it makes every app fast; large re-rendered trees still cost.
• Confusing it with the Shadow DOM, which is a separate browser feature.

Related

• DOM
• React
• Svelte
• Hydration

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.