So you will get all the answers to these questions after reading this blog. Let’s learn a little bit about virtual DOM and why is it interesting in a React application.
So far we get a brief about Browser DOM, now we will discuss what Virtual DOM is all about.
When we enter into the react world, the react application maintains the virtual DOM. Basically, virtual DOM is a react object just like a browser DOM which is a browser object.
- The Virtual DOM in React terminology is a lightweight representation of a Browser DOM.
- Virtual DOM is an in-memory object in your React application, which means earlier what we need to do is whenever you change anything in the Browser DOM, you need to go and re-render the web page all over again. But the Virtual DOM, since it is maintained in memory by your React application,
- Whenever you have any changes in the props/state of your component that may result in component re-rendering which is initially done in Virtual DOM only.
- Manipulating Virtual DOM is a very very fast and effective process.
NOTE: Every time, whenever we call the setState, the Virtual DOM will be created from the scratch behind the scenes. Y
Let us try to understand this concept with the help of an example.
- So, in the above example, on the left side, I showed a Virtual DOM tree here. And in that Virtual DOM, you see I have marked three components there with red color. These three components are the ones that have been affected by a change in the state for my React application.
- Now, what that means is that you will have to re-render your view in the browser, which means that you will need to manipulate the Browser DOM to make the Browser DOM correspond to the changes that have been effective in the Virtual DOM.
- The React application’s work is that they will do a difference between the previous version of the DOM and the current modified version of the DOM.
- In this case, for example, when these three red components are affected due to the change in the state, then it may result in the re-rendering of all those nodes that are marked in purple to the right of the screen. So, only that part of the DOM tree may have to be re-rendered to ensure that the changes are reflected in the Browser DOM.
1: React runs in diffing algorithm. The diffing algorithm will detect all the nodes that have changed. As we have seen, the red color nodes that were marked in the tree there, this may result in updates to the entire sub-tree if the diffing detects that two elements are of different types.
So, the diffing algorithm identifies the minimum number of components or minimum part of the tree that needs to be updated in order to make the modified version in sync with that browser DOM.
2: For re-rendering multiple items here, we use the key attribute in the list items in order to indicate which child elements are stable we always supply the key attribute to each list item while rendering the list, and each key attribute was a unique identifier for that particular item in the list.
So, when the diffing algorithm works, if it notices that some parts of the list cannot change, they don’t need to be re-rendered. and so, it’ll re-render only those list items that have actually been modified.
I hope with this quick understanding of React Virtual DOM, you will be able to understand what’s going on behind the scenes while updating the DOM.
Thanks For Reading!!!