Virtual DOM and How it Works

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.
• Virtual DOM will only update the nodes on the tree that have actually changed

How does Virtual DOM Work?

The process of how the Virtual DOM works can be broken down into 3 steps:

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM repos
2. Then the difference between the Real DOM representation and the new Virtual DOM is calculated.
3. Once the calculations are done, the Real DOM will be updated with only the things that have actually changed

Video Explanation