A Virtual DOM is a lightweight JavaScript object which is an in-memory representation of real DOM. It is an intermediary step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.
Virtual DOM works in three steps:
1. Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.
2. Now, the difference between the previous DOM representation and the new DOM is calculated.
3. Once the calculations are completed, the real DOM updated with only those things which are changed.