DEV Community

Cover image for How does the virtual DOM work in React!
Ajinkya Chanshetty
Ajinkya Chanshetty

Posted on

9 2

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 :)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (9)

Collapse
 
vdat profile image
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?

Collapse
 
aajinkya profile image
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.

Collapse
 
arati8897 profile image
Arati β€’

Where we can see the virtual DOM in browser memory.

Collapse
 
vdat profile image
V-Dat β€’

you can do like this :

function App(){
   const appVirtualDOM = <div>Hello World!</div>;
   console.log(appVirtualDOM);
   return appVirtualDOM
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
brundabharadwaj profile image
Brunda M Bharadwaj β€’

+1

Collapse
 
prkkhan786 profile image
prkkhan786 β€’

Sleek and simple explanation

Collapse
 
aajinkya profile image
Ajinkya Chanshetty β€’

Thank you!

Collapse
 
coderdaiyan profile image
Abdallah Daiyan β€’

Very simple explanation...helped me a lot πŸ₯°β€

Collapse
 
skptricks_93 profile image
skptricks β€’

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay