What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

How Virtual DOM works?

The Virtual DOM works in three simple steps.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

2. Then the difference between the previous DOM representation and the new one is calculated.

3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Why do we need virtual dom

1. Faster Re-Renders: Since only the changed nodes are updated, it avoids unnecessary re-renders of the entire tree.
2. Smooth User Interfaces: Updates happen quickly, providing a better user experience in dynamic web applications.
3. Efficient Memory Use: By minimizing the need for complete tree re-renders, the memory footprint is reduced.