React Virtual DOM

Gaurav Singh
Nov 4 · 2 min read

What is DOM?

DOM stands for the Document Object Model. DOM is a programming interface for HTML and XML documents. The documents for DOM in any webpage. The object is the HTML tag like the body, button, font, etc. The model stands for how you layout this structure. DOM is a tree structure of a webpage. Each object represents a node in the tree. The HTML is the root node of the tree. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.

Updating the DOM

There are function in JavaScript like ‘getElementById’ or ‘getElementByClass’, etc. which is used to update the DOM.

What happens when we update the DOM?

The browser finds the node based on class, id or tag, it then removes the child of that node, updates the value, reassigns the CSS to parents and child node, updates the layout and then finally traverses the tree to display the DOM.

Virtual Dom and How it Works?

It is a copy of the actual DOM. Rendering and re-rendering the DOM is slow and not very cost-effective. React has used the original DOM to rewrite it in javascript to make it furthermore efficient.

When the state changes in React, it creates a new virtual DOM which is to be compared with the previous virtual DOM. The changes are then updated in the original DOM to be displayed on the webpage. This process is known as ‘diffing’.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade