React and the virtual DOM
The most common architecture considered when implementing user interfaces is MVC (Model-View-Controller). MVC separates an application into three components: Model, View, and Controller. The Controller is what the user interacts with, the View is what the user sees, and the Model takes commands from the Controller, and sends updates to the View.
What is React?
What is DOM?
The DOM (Document Object Model) is the browser’s internal representation of a webpage or application. It breaks the application up into nodes. For example on a blog page, there could be a navigation node, a blog post node, a comments node etc. If a user wants to leave a comment on a blog post, they interact with the comments node (via the Controller in an MVC architecture), the data for this node is updated in the Model, the View is updated, and the comment appears on the blog page.
However, this problem has a solution: React and the virtual DOM.
What is virtual DOM?
A virtual DOM is like an exact copy of the DOM. Once a node in the virtual DOM has been updated, React compares the new virtual DOM with the old virtual DOM, and figures out which nodes have been changed (this is known as ‘differencing’). React then updates ONLY the changed nodes in the real DOM. This makes it so that nodes can be updated without having to reload the DOM in its entirety.
Take the blog page example. In a non-virtual DOM architecture, a user leaving a comment would cause the whole page to reload. React and the virtual DOM would only reload the comments component.
Benefits of React
One of the main plus point of React is the faster method of updating the DOM. Although it may initially take longer to develop a UI with React, it creates a more efficient development environment because the code is easier to maintain and update going forward. Also, by breaking applications into components (or nodes), and building the components separately, it allows the developer to reuse the components across other applications and webpages. This componentised UI is becoming increasingly popular in web development, and React is a big proponent of that. Companies that use React on their websites include Facebook, Netflix and Imgur.