What is Virtual DOM


The Virtual DOM (VDOM) is 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.


The Virtual DOM works in three simple steps.

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