What’s the Difference Real vs Virtual DOM

So what is the DOM

According to W3 schools, the Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In short, when a web page loads to the browser, the browser is like Chrome, Firefox, internet explorer, and so on. The browser creates a Document Object Model or DOM for short of the page. The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

Why is DOM manipulation slow

The DOM shaped as a tree data structure. This makes the changes and updates to the DOM fast. But with the data structure being a tree shape when the initial element is changed then all the children and gradchildren and so forth also have to update their elements to update the applicaition. The re-rendering of the user interface makes it very slow. Therefore, the more UI components you have, the more longer the DOM updates will be, since they need to re-render for every DOM change. On the other hand the virtual DOM is much quicker because, the virtual DOM calculates the best possible method to change the real DOM. This makes sure that there are the least amount of operations on the real DOM. Which helps with reducing the performance cost of updating the real DOM.

How does React use Virtual DOM

Now that you have a decent grasp of what a Virtual DOM is, and how it can help with the performance of your app or web page, let us have a look into how React uses the virtual DOM to its advantage.

In React every UI piece is a seperate component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.

Once React knows which virtual DOM objects have changed, then React updates only those objects, in the real DOM. This makes the performance far better when compared to manipulating the real DOM directly. This makes React stand out as a high-performance JavaScript library.