First off, the Domain-Object-Model (DOM) is a representation parsed by the browser that is comprised of a document’s structure and content. It is a programming interface for HTML or XML documents that allows programs to change the document style, content, and structure. The DOM acts as a live data structure and when modified it reflects that change on screen.
In React, there is a corresponding virtual DOM object for every DOM object. The virtual DOM objects have all the same properties as objects in the real DOM, however it is unable to change what is on screen making it much more lightweight. It’s like the schematics for the DOM rather than the physical building. The virtual DOM is a representation of the real DOM. The virtual DOM is created when new elements are added to the user interface (UI).
The purpose of this virtual DOM is that when a change to an element in-browser trigger’s a re-render of a component, the entire virtual DOM is updated- which is much faster than doing so in the real DOM as nothing is actually represented on-screen at this point. The differences (or diffs) between the updated virtual DOM and the pre-update virtual DOM are compared- and only the virtual DOM objects with diffs are updated in the real DOM and represented in-browser. This means that the entire web-page does not need to be re-rendered every time a change occurs- making the process much faster.
Let’s say React didn’t incorporate the functionality of the virtual DOM- any time an event is triggered or state or props of any component are changed, the entire DOM is updated. This means all of the data is fetched again (slow) and then entire web-page is re-rendered (slow) with every change. Thanks to the virtual DOM web and native app users don’t have to wait for the entire DOM tree to update every time a change occurs in-browser.