What do you know about the Virtual DOM? Explain how it works?
The virtual DOM is a lightweight JavaScript object which originally is just a shallow copy of the real DOM. It forms a node tree that lists the elements, their attributes, and content as JS 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 is caused by various actions done by the user or by the system.
This 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.
