What is Virtual DOM in React ?

What is Virtual DOM in React ?

Let's unpack the meaning of the word into two segments from the above question. Virtual meaning it's a representation(simulation) of the original. DOM stands for Document Object Model, meaning documents(elements) are treated as Object's copies/replica. DOM is the logical structure of the documents, allows us to create and manipulate elements effectively.

DOM represents your whole UI of your application. Think of DOM as a tree with branches and all the branches containing leaves(Your Content). This node(branch) is what makes up the whole DOM tree.

Virtual DOM in the other hand is the light copy of original(Real) DOM kept in sync with Virtual DOM. React came up with a solution to pages re-loading as a whole and to improve the User Interaction in a more efficient way by introducing Virtual DOM.

Updating the original(Real) DOM is costly and time consuming which will respectively impact User Interaction. This is when Virtual DOM comes in handy. Whenever there's some changes in a particular element(branch). It compares the changes in it's Virtual DOM tree and then only it makes changes to that particular node(branch/element) of the Real DOM. This gives Virtual DOM a great edge as compared to the Real DOM.