Virtual DOM is a lightweight JavaScript representation (copy) of the real DOM. It is called lightweight because it doesn’t include actual DOM elements, methods, or event listeners it only holds essential information like element type, attributes (id, class, key, etc.), and structure needed to represent the UI.
When we write a React app and run it using npm run dev, React first converts all JSX code into JavaScript objects (React Elements).
These React Elements are arranged in a tree structure, and that entire in-memory tree is called the Virtual DOM.
The first Virtual DOM is created when the component renders (mounts) for the first time.
Later, whenever state or props change, React creates a new Virtual DOM,
compares it with the previous one (Diffing), and updates only the changed parts in the Real DOM.
Whenever we **perform any change** in the UI (like updating state or props), React **creates a new Virtual DOM**.
This comparison process is handled by the Diffing Algorithm.
The algorithm identifies only the parts that have changed and updates only those specific elements in the Real DOM, instead of re-rendering the whole UI.
Reconciliation is the whole process where React:
Creates a new Virtual DOM after any changes (like state or props update)