Some people love it, some people hate it, but React js is here to stay. Facebook is innovating like crazy in the field of Web Development and it is one of the most progressive web development groups in the world right now.

The recent innovations in the React ecosystem are amazing, including the Virtual DOM, Flux, Relay etc are contributions to a new web, more performant, more mantainable and more open.

However, one of the biggest reasons to use React js is the separation of the UI representation from the actual rendering, also known by the confusing name Virtual DOM.

WTF is a Virtual DOM?

React is an isomorphic/universal framework. That means that there is a virtual representation of the UI component tree, and that is separate from the actual rendering that it outputs in the browser. From the documentation:

React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM.

However, that in-memory representation is not tied directly to the DOM in the browser (even though it is called Virtual DOM, which is a confusing name for an universal apps framework), and it is just a DOM-like data-structure that represents the UI components hierarchy and additional meta-data.

"When a component's props or state change, React decides whether an actual DOM update is necessary by constructing a new virtual DOM and comparing it to the old one. Only in the case they are not equal, will React reconcile the DOM, applying as few mutations as possible." - React Docs

However, be aware that the Virtual DOM is just an implementation detail of React, and for example the React-Native package is not using it.

Rendering Agnostic

The right way to think about React is to think about it as a Rendering Agnostic framework.

"We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React." - React js Blog

React doesn't care doesn't care what is the final output. It can be a DOM Tree in the browser, it can be XML, Native components or JSON.

"As we look at packages like react-native, react-art, react-canvas, and react-three, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM." - React js Blog

The agnostic nature of React allows it to render the same code anywhere, which is one of the biggest reasons to use React today. You can render the exact same JavaScript code on the client and on the server, which is awesome if you ask me.

Performance benefits

Since React mantains a separate DOM-like data-structure internally it can also do smart optimizations before rendering the component tree into it's final form. This is where smart diff algorithms come into play, so React can just do partial updates of the actual DOM Tree, instead of re-rendering the whole component tree.

"The idea of re-rendering an entire subtree of components in response to every state change makes people wonder whether this process negatively impacts performance. React uses several clever techniques to minimize the number of costly DOM operations required to update the UI." - React Docs

Understanding Mounting

Mounting is the process of outputting the virtual representation of a component into the final UI representation (e.g. DOM or Native Components).

In a browser that would mean rendering a React Element into an actual DOM element (e.g. an HTML <div> or <li> element) in the DOM tree. In a native application that would mean rendering a React element into a native component. You can also write your own renderer and output React components into JSON or XML or even XAML if you have the courage.

So, mounting/unmounting event handlers are critical to a React application, because you can only be sure a component is output/rendered when it is mounted. However, the componentDidMount handler is invoked only when rendering to an actual UI representation (DOM or Native Components) but not if you are rendering to an HTML string on the server using renderToString, which makes sense, since the component is not actually mounted until it reaches the browser and executes in it.

And, yes, Mounting is also an unfortunate/confusing name, if you ask me. IMHO componentDidRender and componentWillRender would be better names, but still confusing in some scenarios.

Final Notes

Whatever you think about React js, you can't deny it is bringing good stuff to the table, and hopefully other frameworks and technologies will follow and enable a better development experience.