DOM vs Virtual DOM

DOM(Document Object Model)

1.The DOM is a programming interface that represents the structure of an HTML or XML document as a tree of objects.

2.Each element in an HTML document, such as heading, paragraphs, buttons, and more, is represented as a node in the DOM tree.

3.When a web page is loaded or updated, the browser constructs the initial DOM tree based on the HTML markup.

4.Any changes to the content or structure of a webpage are reflected in the DOM, and these changes trigger a process called ‘reconciliation’ in which the browser updates the visible content on the screen

Virtual DOM

1.The Virtual DOM is a concept introduced by React to improve the efficiency of updating the actual DOM.

2.React creates an in-memory representation of the DOM called the virtual DOM. This representation is a lightweight copy of the real DOM.

3.When there’s a change in a React component’s state or props, React doesn’t immediately update the real DOM. Instead, it first updates the Virtual DOM to reflect the new state of the component.

4.After updating the Virtual DOM, React performs a process called ‘reconciliation’ to identify the differences between the old Virtual DOM and the new Virtual DOM.

5.Once the differences are identified, React calculates the most efficient way to update the real DOM to match the new Virtual DOM.

6.Finally, React applies the necessary ch anges to the real DOM, resulting in an update to user interface.