ReactJS | Virtual DOM

DOM: DOM stands for ‘Document Object Model’. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. It contains a node for each HTML element present in the web document. It is very useful as it allows web developers to modify content through javascript, also it being in structured format helps a lot as we can choose specific targets and all the code becomes much easier to work with. If you want to learn more about DOM, visit this link.

Updating DOM: If you know a little about javascript then you might have seen people making use of ‘getElementById()’ or ‘getElementByClass()’ method to modify the content of DOM. Though doing thinks like this is not a problem and it works fine, but consider a case where we have a DOM which contains nodes in a large number and also all these web elements have different styling and attributes.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// simple getElementById() method
 document.getElementById('some-id').innerValue = 'updated value';

chevron_right


When writing the above code in the console or in the javascript file, these things happen:

  • The browser parses the HTML to find the node with this id.
  • It removes the child element of this specific element.
  • Updates the element(DOM) with the ‘updated value’.
  • Recalculates the CSS for the parent and child nodes.
  • Update the layout.
  • Finally, traverse the tree and paint it on the screen(browser) display.

So as we know now that updating the DOM not only involves changing the content, it has a lot more attached to it. Also recalculating the CSS and changing the layouts involves complex algorithms and they do affect the performance. So React has a different approach of dealing with this, as it makes use of something known as Virtual DOM.

Virtual DOM: In React, Virtual DOM exists which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.

How Virtual DOM helps React?
Each time we change something in our JSX file, all the objects that are there in the virtual DOM gets updated. Though it may sound that it is ineffective but the cost is not much significant as updating the virtual DOM doesn’t take much time. React maintains two Virtual DOM at each time, one contains the updated Virtual DOM and one which is just the pre-update version of this updated Virtual DOM. Now it compares the pre-update version with the updated Virtual DOM and figures out what exactly has changed in the DOM. This process is known as ‘diffing’. Once React finds out what exactly has changed then it updated those objects only, on real DOM. This significantly improves the performance and is the main reason why Virtual DOM is much loved by developers all around.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.