THE REAL DOM AND VIRTUAL DOM

The DOM
 DOM (Document Object Model) represents the UI present in your application.
It is a structured representation of the Html element present in a Web-app, for every change in the state of the application, the Dom gets updated to reflect the change in the UI.
The downside is every time the DOM gets updated, the updated elements and children have to be rendered again in other to update the UI of our page.
Updating the Dom involves recalculating the CSS and changing the layout requires complex algorithms that affect the performance.
React makes use of Virtual DOM to make changes, which makes React faster.
Virtual DOM
React uses the virtual DOM to propagate changes to the UI, We can compare the virtual DOM to a building blueprint, after changes have been made on the blueprint, it's then propagated to the real building.
For every object in the original DOM, there is a virtual version of that object in the React Virtual object.

Scenario

1. Imagine you just added a To-do to your to-do list.

2. A new virtual DOM is created.

3. The new virtual DOM is then compared with the previous Virtual DOM before it got updated.

4. React figures out what object has changed.

5. The changed object then gets updated on the real DOM.

6. Changes on the Real Dom cause the screen to change.

Resources:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction…

 https://reactjs.org/docs/faq-internals.html

Reference: https://geeksforgeeks.org/reactjs-virtual-dom/