What is Virtual DOM in React.js?
- Like a light copy of the DOM, it’s also a tree where every node is a JS object.
- It’s the representation of the UI at a specific moment in time.
- It’s a technique, and there are a few known implementations.
- It is a node tree that lists the elements, their attributes, and content as Objects and their properties.
- React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which are caused by various actions done by the user or by the system.
This Virtual DOM works in three simple steps.
- Whenever any 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.
