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? react does exactly that. React lets you declare how you want your UI element to look like and abstracts out low-level DOM manipulation APIs. Apart from this very useful abstraction, react does something pretty smart to solve the performance problem as well.

React uses something called a Virtual DOM. A virtual DOM is a lightweight abstraction of the HTML DOM. You can think of it as a local in-memory copy of the HTML DOM. React uses it to do all computations necessary to render the state of a UI component.

You can find more details of this optimization at https://facebook.github.io/react/docs/reconciliation.html.

React's primary strength, however, is not just Virtual DOM. React is a fantastic abstraction that makes composition, unidirectional dataflow, and static modeling easier while developing large applications.