Virtual DOM for Dummies: What is the VDOM?

What is the DOM?

First things, first. Before we discuss the virtual DOM you will need an understanding of the browser DOM in order to gain better insight. By definition the DOM stands for document object model.

The DOM defines the logical structure of documents and the way a document is accessed and manipulated

- W3.ORG

What is the VDOM?

The virtual DOM is a “Fake” digital representation of the original browser DOM generated by React components. The VDOM is faster then the real browser DOM when it comes to manipulating DOM elements.

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

- React Documentation

DOM vs. VDOM

1. Manipulating DOM is slower compared to the VDOM
2. Manipulating VDOM is faster compared to the DOM

Credits

1. https://www.w3.org/TR/REC-DOM-Level-1/introduction.html
2. https://reactjs.org/docs/faq-internals.html#:~:text=The%20virtual%20DOM%20(VDOM)%20is,a%20library%20such%20as%20ReactDOM.&text=Since%20%E2%80%9Cvirtual%20DOM%E2%80%9D%20is%20more,it%20to%20mean%20different%20things.