If you are using React you would have definitely heard that React uses virtual DOM which makes it faster. In this post we'll see what is virtual DOM in React and how does it speed up the React rendering.
Document Object Model
We'll start with a bit of understanding of DOM which makes it easier to understand Virtual DOM in turn and how these two compares.
If you have used JavaScript you would have probably used methods like document.getElementById() or
document.getElementsByName(), these methods can access the element with the specific ID or the element
with specific name because of the creation of Document Object Model (DOM).
When an HTML page is received by a browser, page is parsed and converted into a tree like structure of objects known as DOM. An object is created for each HTML element in the document which is represented by a tree node.
All of the properties, methods, and events available for manipulating and creating web pages are organized into objects.
The DOM represents the document as nodes and objects. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.
Because of the tree like structure accessing and updating node is fast but re-rendering is not efficient because for each update DOM is created and rendered again.
Virtual DOM - How it is fast
A Virtual DOM (VDOM) is a lightweight representation of the DOM which is kept in memory. Now you may think how it is faster as now you have two copies Virtual DOM and Browser DOM meaning more overhead.
It is actually the rendering process with React Virtual DOM which makes it faster while also confirming with the React declarative approach. In declarative approach you specify what state you want and React makes it happen.
React maintains two virtual DOMs in memory, when there is any change in the data, React creates a new Virtual DOM with the changes accommodated in it. So, there is a virtual DOM representing a new state and a virtual DOM with previous state.
Once there are two copies of VDOM two things happen-
- React has to know what has changed, that process is known as diffing. In the diffing process previous and current virtual DOMs are compared to find out the nodes with changes.
- Update only the changed node(s) in the “real” DOM. This process in React is called reconciliation and done by a library such as ReactDOM. Since the whole DOM (Browser or real DOM) is not re-created, only the modified nodes are updated and rendered on the browser the rendering process becomes faster and more efficient.
That's all for this topic React Virtual DOM. If you have any doubt or any suggestions to make please drop a comment. Thanks!
Related Topics
You may also like-
No comments:
Post a Comment