In this article:
- Concept review: What is DOM?
- How DOM works
- Drawbacks of DOM manipulation
- Exploring the virtual DOM in React
- What is Virtual DOM
- How Virtual DOM works
- Batch update
How React works with the virtual DOM
What is DOM
JavaScript makes the HTML page active and dynamic via the DOM.
to make an HTML document more interactive and dynamic, the script needs to be able to access the contents of the document and it also needs to know when the user is interacting with it.
It does this by communicating with the browser using the properties, methods, and events in the interface called the Document Object Model, or DOM.
The DOM is a tree-like representation of the web page that gets loaded into the browser.
It represents the web page using a series of objects. The main object is the document object
The DOM is a top down representation of all the elements that make up a web page. It’s the interface through which your script interacts with your HTML.
There are many properties and methods which you can use to get information about the DOM and manipulate it.
How DOM Works
Let’s take this HTML document as an example:
<!doctype html>
<html lang=”en”>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>
This document can be represented as the following node tree
DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.
This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
DOM dynamically adds removes the data at the back end and when modification were done ,then each time a new DOM is created for the same page ,this repeated creation of DOM makes unnecessary memory wastage and reduces the performance of the application.
The DOM has some disadvantages also. These are:
- It consumes more memory.
- Its operational speed is slower due to the larger usage of memory.
- Stores the entire document in memory.
- As DOM was written for any language, method naming conventions don’t follow standard Java programming conventions.
As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That’s ten times more work than
necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.
Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.
To overcome this problem react introduce new mechanism Virtual DOM
Virtual DOM is the In-memory replication of Real DOM
As the name implies, virtual DOM is a virtual representation of the Real DOM. By virtual, we mean a much lighter replica of the Real DOM in the form of objects that can be saved in the browser memory.
The concept of Virtual DOM comes to make the performance of Real DOM better and faster. Virtual DOM is a virtual symbol of the DOM.
But the main difference is that every time, with each change, the virtual DOM gets updated instead of the Real DOM.
How Virtual DOM works
When any new things are added to the application, the virtual DOM is created, represented as a tree. Every element in the application is a node in the tree.
Therefore, whenever there is a change in the position of an element, a new virtual DOM is created. The newer virtual DOM tree is compared with the latest, where the changes are noted.
It finds the possible way to make these changes by the Real DOM. Then the updated elements would re-render on the page.
Batch Update
React JS using the diffing algorithm to find the minimum number of steps to update the Real DOM. It uses batch updates to update the Real DOM. Once it has these steps, it executes all the steps in one event loop without involving the steps to repaint the Real DOM. Thus, if there are more element which gets updated React JS will wait for the event loop to finish then, in batch will update the real DOM with all the updated elements.
Once all the steps are executed, React will repaint the Real DOM. This means during the event loop, there is exactly one time when the Real DOM is being painted. Thus all the layout process will run only on time for updating the real DOM.
The process of converting the changes to the Real DOM is called reconciliation.
Let’s look at steps React follows to works with Virtual DOM.
- React JS creates a copy of the original DOM, calling it the Virtual DOM. Each of the nodes of the Virtual DOM represents an element.
- React follows observable patternsand observes the changes in states.
- if there is a state update of an element, a new Virtual DOM is created.
- React comparesthe current version of the virtual DOM with the previous version .
- React knows which objects are changed in the virtual DOM.It replaces the objects in the Real DOM, React runs a batch update to update the Original DOM leading to minimal manipulation
- This process is known as “differentiation”.
Conclusion:
React js uses virtual DOM based mechanism to fill data in DOM.
virtual DOM is a virtual representation of the Real DOM. By virtual, we mean a much lighter replica of the Real DOM in the form of objects that can be saved in the browser memory.
The Virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time.