First of all Why we need Virtual DOM? What is the problem with DOM? The problem first presents John Resig who is the creator of JQuery The DOM is a Mess. He discusses the DOM API and its weirds
Main flow examples
(Vue, React) developed Single Page Applications has lots of divs and div hierarchy on one page. and it’s hard to manage to access divs. How to manage DOM manipulation(add, delete or update). It’s too difficult. Lots of event handling also required. Virtual DOM provides an abstraction to DOM so you don’t think browser-specific details. Developers thinks only on component-level events.
React Component Lifecycle
The state diagram shows how component lifecycle flows and events trigger according to states
Hold the same DOM hierarchy in memory and when you make some updates Virtual DOM node changes. In the background, the diffing algorithm runs and finds different nodes and apply to real DOM. The cycles continue in same logic.
Shadow DOM vs Virtual DOM