Explain the Virtual DOM and its working

Posted by Andre Scott | Updated on

A virtual DOM is a lightweight JS object. It is simply a copy of the real DOM. A virtual DOM is a node tree that lists various elements, their attributes, and content as objects and their properties.

The render() function in React is responsible for creating a node tree from the React components. This tree is then updated in response to the mutations resulting in the data model due to various actions made by the user or the system.

Virtual DOM operates in three simple steps:

  • Step 1 – The entire UI is re-rendered in Virtual DOM representation as soon as there are some underlying data changes.
  • Step 2 – Now, the difference between the previous DOM representation and the new one (resulted from underlying data changes) is calculated.
  • Step 3 – After the calculations are successfully carried out, the real DOM is updated in line with only the things that actually underwent changes.

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers