Let's take a moment to understand what is a Virtual DOM. We discussed DOM (document object model), a tree structure of HTML element on a web page. DOM is de facto, and the primary rendering mechanism of the web. The DOM APIs, such as getElementById(), allow traversing and modification of the elements in the DOM tree. DOM is a tree and this structure works pretty well with traversal and updating of elements. However, both the traversing and updating of DOM is not very quick. For a large page, the DOM tree can be pretty big. When you want a complex UI that has bunch of user interactions, updating DOM elements can be tedious and slow. We have tried jQuery and other libraries to reduce the tedious syntax for frequent DOM modifications, but DOM as a structure itself is quite limited.
What if we don't have to traverse the DOM over and over again to modify elements? What if you just declare how a component should look like and let someone handle the logic of how to render that component...