Real DOM and Virtual DOM

 What is DOM?

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The DOM is an abstraction of a page’s HTML structure. It takes HTML elements and wraps them in an object with a tree-structure — maintaining the parent/child relationships of those nested HTML elements. This provides an API that allows us to traverse nodes (HTML elements) and manipulate them in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc.

Real DOM	Virtual DOM
DOM is a language-neutral interface allowing programs and scripts to dynamically access and update multiple objects like content, structure, and style of a document.	Is a collection of modules designed to provide a declarative way to represent the DOM for an application.
The DOM represents the document as nodes and objects.	A virtual DOM object is a representation of a DOM object, like a lightweight copy.
It is an object-oriented representation of a web page, modified with a scripting language like JavaScript.	Virtual DOM is ideal for mobile-first applications.

How does updates work in React?

On the first load, ReactDOM.render() will create the Virtual DOM tree and real DOM tree.

As React works on Observable patterns, when any event(like key press, left click, api response, etc.) occurred, Virtual DOM tree nodes are notified for props change, If the properties used in that node are updated, the node is updated else left as it is.

React compares Virtual DOM with real DOM and updates real DOM. This process is called Reconciliation. React uses Diffing algorithm techniques of Reconciliation.

Updated real DOM is repainted on browser