How does the virtual DOM work in React!

Let's consider the Facebook application which is based on React and it has multiple components like a sidebar, header, footer, and the main content.

Whenever someone posts something, it simply comes to your feed without refreshing the complete page. In this scenario, only the main content part is changed keeping the other components constant.

You might have heard about this fancy technique of Virtual DOM in ReactJS which makes it faster as compared to other frameworks like Angular and VueJS. But does it make the React faster or just the USP for marketing it, let have a look at it.

React makes the DOM tree-like structure of all the components internally called the VDOM.

React has a virtual DOM which is a copy of the actual DOM and is kept in the browser Memory in the form of a javascript object.
React also has the state and props, which holds the data of the application and is used to pass that across the components in the hierarchy.

Whenever the change in the data means state or props of the component changes then it creates another virtual DOM. Now, the comparison between the previous and the updated VDOM takes place. This checking takes place using 'Diffing Algorithm' and it's quite faster than checking with the actual DOM.

Thus, whatever the changes are detected in the comparison of the two virtual DOMs in the memory gets updated in the actual DOM directly. This process is known as 'Reconciliation.

Rendering of the DOM is a very tedious and slow process. Because it involves the CSS parsing for the layout changes and HTML parsing for UI calculations. Hence, Virtual DOM is faster in comparison because it does not involve the complete render of the page.

Well, that's it for now, Happy Reading :)

Comments

[V-Dat]

Hi, I still wondering about this Whenever the change in the data means state or props of the component changes then it creates another virtual DOM

You mean React will regenerate the entire DOM tree starting from root ? Or just recreate the VirtualDOM of the rendered components?

[Ajinkya Chanshetty]

Yes, it creates another virtual dom on every state or prop change and then comparison between the two VDOMs takes place and the difference gets updated in the actual DOM.

[Arati]

Where we can see the virtual DOM in browser memory.

[V-Dat]

you can do like this :

function App(){
   const appVirtualDOM = <div>Hello World!</div>;
   console.log(appVirtualDOM);
   return appVirtualDOM
}

[Brunda M Bharadwaj]

+1

[prkkhan786]

Sleek and simple explanation

[Ajinkya Chanshetty]

Thank you!

[Abdallah Daiyan]

Very simple explanation...helped me a lot 🥰❤

[skptricks]

check this example ;- skptricks.com/2021/05/react-virtua...