React JS Virtual DOM
What is DOM ?
DOM stands for Document Object Model. HTML is the language of web pages. It provides the web page structure with many specialized tags, including the way to link multiple pages together. The structure of a web page is represented as a tree structure document object. The JavaScript programming language can change the structure of this document object to bring dynamic behaviour to the web pages.
The DOM is the programming interface for the tree structure web page documents. The document tree is called the DOM Tree.
Visual Diagram of DOM
DOM Manipulation
Now, if we have to change the text of the paragraph(the <p> tag), we will need the ability to find the <p> tag from the document tree and then set a new text value to it. We have to do all these using the JavaScript DOM APIs.
- Mechanism of finding a particular node in the document tree is called Querying the DOM.
- Adding a new node, deleting a node, or updating a node in the document tree is called DOM Manipulation.
- The result of a DOM manipulation reflects on the web user interface. This process is called rendering.
DOM Manipulation is Costly?
Frequent update to the DOM is costly. It may degrade the web page performance and makes it slow. As the DOM is represented with a tree structure, querying and updating are usually faster than rendering. However, it may also be costly if we have to traverse a good portion of the DOM tree to find the node to update.
Let’s look at the employee table below that shows the employee’s name and if the employee is married.
Employee table
If we have to traverse the document tree representation of this table every time to make an update, then the DOM manipulation will be costly.
Solution
What is Virtual DOM ?
ReactJS never updates the original DOM directly(unless a developer use case requires it). In ReactJS, for every DOM object, there will be a corresponding in-memory copy created. This copy is called the Virtual DOM(VDOM).
In the Virtual DOM tree, each element is represented by a node. A new Virtual DOM tree will be created whenever the element’s state changes. The ReactJS’s diffing algorithm will compare the current Virtual DOM tree with its previous version. Finally, the VIrtual DOM uses the algorithm to update the actual DOM with the diff.
Visual Representation of VDOM
Virtual DOM Key Note
- First, ReactJS creates a copy of the original DOM, calling it the Virtual DOM. Each of the nodes of the Virtual DOM represents an element.
- Next, if there is a state update of an element, a new Virtual DOM is created.
- The diffing algorithm identifies the difference of the change. In this case, a subtree from the changed node has been identified as the diff.
- Last, the ReactJS runs a batch update to update the Original DOM with these changes to keep it in sync.
Reconciliation & Fiber
The mechanism to diff one tree with another to determine which parts need to be changed and then update the original DOM with it is called Reconciliation. ReactJS uses a new reconciliation engine called Fiber since version 16.0.
