What makes React.js so snappy and powerful? The Virtual DOM plays a major role in this. If you have ever worked with React, I am sure you heard of it but how comfortable are you with how it works? In this article I will give a brief overview of what the Virtual DOM is and how it works in React.
What is the Virtual DOM
According to React Documentation, "The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM."
To understand the Virtual DOM, we need to take a step back and look at the DOM. DOM stands for Document Object Model. This is basically a structural representation of a web page. The DOM will break down the web page into nodes and objects that we can access and change. This is what allows us to use JavaScript to make our applications dynamic. Whenever we manipulate the DOM, this will cause what the user sees on the webpage to change. With how complex modern web design is, this can easily turn into a problem.
Let's take a simple list for example. When we decide to add/remove something from that list, this will change our DOM and cause it to rebuild and render the update. Even though we just made a change to one list item the whole webpage has to be rendered again and the DOM has to be updated. This is just a simple list. Imagine this on a much larger scale with todays Single Page Applications? This can lead to performance issues fast!
This is where the Virtual DOM comes in to save the day! The Virtual DOM is a copy of the actual DOM. For every object on the DOM there is a copy of that object in the Virtual DOM. The Virtual DOM is stored in memory and the user does not see it. Whenever we update our state and props ,in React, the Virtual DOM gets updated. From there, React knows what to update or keep the same. This is how React can update just sections of a webpage instead of having to rebuild and render the whole webpage after any DOM manipulation like other frontend frameworks.
How the Virtual DOM Works
Okay, now we know about the DOM and the Virtual DOM, how does it work in React? React actually uses 2 Virtual DOMs. One Virtual DOM is created to represent the changes. The other Virtual DOM is a copy of what it looked like before any changes were made. React will then compare these two Virtual DOMs to see what needs to be updated. So how does this look?
Whenever we make a change to a state or props it will rebuild every element on the Virtual DOM. This may sound like this could lead to performance issues but remember this is just a copy in memory of the actually DOM. There is no rendering it on the screen. This is a very fast process. Once the updates are made to the Virtual DOM React will compare it to the "snapshot" of the previous Virtual DOM from before the changes where made. During this comparison React can see exactly what elements changed and needs to be updated. Only the elements that changed from the previous Virtual DOM will be rendered on the actual DOM. This is how React updates only what needs to be updated instead of having to rebuild and render an entirely new DOM when making any updates.
TLDR
To recap briefly, the DOM (Document Object Model) is a structural representation of a webpage. It gives us access to the different elements of our page and effects what is rendered on the screen. The Virtual DOM is a copy of the actual DOM. The Virtual DOM is stored in memory and the user does not see this. React uses two Virtual DOM’s to control what is rendered and updated. Whenever one change is made to the Virtual DOM, all the elements will get rebuilt and create a new Virtual DOM. This new Virtual DOM will get compared to the previous Virtual DOM (from before the changes). The differences between the two Virtual DOMs will then be updated on the actual DOM. This helps to prevent unnecessary renderings and gives us control of changes to our webpage.
I hope this short and sweet article helps shine some light on the Virtual DOM and how it works with React. Understanding this concept will make you a stronger React developer!
Top comments (0)