Virtual DOM in React JS.
First of all what is a DOM ? The simple meaning of DOM stands for "Document Object model".Or we can say like it's the words represented in the user interface of your application.When a change happen the DOM is updated in order to indicate the change that you have made.Now when the changes happen often the DOM gets slow and takes more time to render the data.
So that is where the virtual DOM comes into play and it provide more significant performance than the real DOM .It's is a just a virtual representation of the real DOM and it gets updated when a change happen in the web application instead of updating the real DOM.
Alright let's see how it works.When a new elements are added the virtual DOM it creates a tree architecture.Every element will be a node in this tree and whenever a a change happen in element a new virtual tree is created and this will be compare with the previous tree and it calculates what is the best way to make the change in the real DOM. After that it choose the best path that will affect minimal operations on real DOM. The picture given in below will indicate how it'll be done picture wise.
Good article 🤘
ReplyDelete