Search for a command to run...
Virtual DOM and Reconciliation are the advanced concepts in ReactJS. However, they are not as tricky as they sound. Let's learn them.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
nice
You are most welcome.
This is an excellent article. In my opinion, this is one of the best articles ever written about the DOM. Your work is excellent and inspiring.
Thanks a lot for such an encouraging feedback 😊
Thanks Mayur
What a clear and amazingly explained concept Tapas Adhikary! Thanks for writing this 😊
Thanks a lot for reading it. 💙
Thanks a lot, Swastika, It means a lot.
Find all my ReactJS articles under one roof. Don't forget to check out [ReactPlay](https://reactplay.io) for practising ReactJS concepts.
Learn the practical usages of useEffect Hook in React. This article shows you how to manage a component's side effects with various use cases.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
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(Document Object Model) is the programming interface for the tree structure web page documents. The document tree is called the DOM Tree.
Let's understand it with a simple example. Here is an HTML code snippet that aims to show the title of a web page and some information in the body of the page.
If we represent the above code snippet as a document tree, it will look like this. Each of the HTML element represents a node in the tree.
When it renders on the web page, we get to see the information like this,
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.
const paragraph = document.querySelector("p");
paragraph.innerText = 'Some other text!';
The 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.
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.
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.
ReactJS is declarative. It means ReactJS abstracts away may low level operations like DOM manipulation from the developers. With that, ReactJS also makes sure to take extra care to tackle the possible performance issues due to frequent DOM manipulation and rendering.
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.
The animated image below explains how a Virtual DOM is created as a copy of the original DOM and how the diffing and update occur.
Please click on this link if you do not see the animated image above
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. You can learn about Reconciliation here. ReactJS uses a new reconciliation engine called Fiber since version 16.0. You can read more about the React Fiber Architecture here.
That's it. I hope you found the beginner-friendly explanation of Virtual DOM and Reconciliation helpful.
As a beginner to ReactJS, you don't need to know how VIrtual DOM works, how the diffing happens, what a batch update is, etc. But if you are interested to know how ReactJS takes care of the app performance and other concepts like memorization, you must spend some time understanding the concept of Virtual DOM and rendering.
Also, whether you like it or not, Virtual DOM and rendering may be an exciting topic for your interviewer 😉! So, better to be aware of it.
If you are interested in learning further about the Virtual DOM, Reconciliation, Diffing, and Batch update from a video tutorial, please check this one,
I share my knowledge on,
Let's connect,