Virtual DOM

React creates a VIRTUAL DOM in memory.

Instead of directly manipulating the browser's DOM, React creates a virtual DOM in memory, where it does all the necessary manipulation before making changes to the browser's DOM.

React figures out what changes have been made by comparing the virtual DOM to the browser's DOM, and only changes what needs to be changed using a library like ReactDOM. This process is known as reconciliation

Process

V-DOM creation:
When a React component is rendered, a V-DOM representation is created for that component and its children.

Status Update:
When the state of a component changes (for example due to user interaction), React creates a new V-DOM that represents the new state of the interface.

Diffing:
Or differentiation, meaning that React compares the new V-DOM with the old V-DOM, determining which parts of the V-DOM have changed.

Reconciliation: React updates the actual DOM to reflect the changes identified in the diff step. In the reconciliation process React is very efficient at updating only the parts of the DOM that need to change.

Render:
Finally the browser renders the changes on the screen.