What is the difference between Virtual DOM and Shadow DOM in ReactJS
You might have heard about the virtual DOM concept of ReactJS and how it changed the complete world with its supersonic speed. Is it really so or just nonsense? Probably! Well, it is not the only feature that makes ReactJS superior to its contemporaries. There are lot More features like React Components, React Elements, Unidirectional flow makes it powerful. There are three kinds of DOMs present in React which are real DOM, Shadow DOM, and the virtual DOM.
The normal DOM or the actual one is nothing but the object-based representation of the HTML elements. The browser converts the code into a tree-like structure that is made into javascript and compiled by the HTML and CSS compilers. There are multiple processes takes place to create a view on the browser as below.
DOM: It is an object-based representation of all the elements present on the webpage. We can see the normal HTML representation of the code as below.
At the time of compilation inside the browser, the DOM like structure can be seen as below.
Source: https://software.hixie.ch/utilities/js/live-dom-viewer/
Now, the virtual DOM is the same copy of the actual DOM that is maintained inside the RAM of the browser. React uses this VDOM for its execution and it renders the page. So, whenever the change is detected in the States of the application, it creates another VDOM of the updated values. Now, instead of rendering the Complete webpage on every change detection, it just compares the changed part and reflects it in the actual DOM.
The detection of change takes place using the ‘Diffing’ Algorithm and the process of transforming them into actual DOM is known as ‘Reconciliation’. Unlike other frameworks, it does not renders the complete page for every change. Hence it makes React faster.
Now, let's consider you have implemented the third party CSS library for the look and feel of the table. Due to this all other UI elements like sidebar, header, and footer are also been impacted and the styles are disturbed. Hence, to maintain such kind of encapsulation between certain subtrees inside the main DOM-tree, HTML5 has come up with the shadow DOM concept.
Shadow DOM is not a standalone document like the actual DOM, but it resides in it. It's very similar to the component-based architecture of React or angular where every component has its own set of stylesheets and global styles as well. ReactJS does not use the shadow DOM for making it faster, it completely relies on the virtual one. But anyone can use this feature of HTML5 intentionally if required.
If you found this information to be productive then please press the like button. Happy Reading :)
