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?
React is a JavaScript library commonly used by software developers when creating user interfaces. The View in this architecture is where React comes in. React is used to build Views, particularly those with many dynamic elements. To explain how React works, we must first define some other terms.
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.
This DOM/node updating works, but it has one major drawback. When one node is updated, the entire webpage has to be reloaded. That’s not as much of a problem in a simple blog page with three nodes, a simple application will typically reload the page rather than reload the DOM. But a complicated webpage or application could have hundreds or thousands of individual nodes, and having to reload the entire webpage every time one node is updated has a significant drain on resource and performance. Also, it isn’t just the HTML DOM that gets reloaded, but any CSS or JavaScript would need reloading too.
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.
