Nowadays, users expect sleek, performant web applications that behave more and more like native apps. Techniques have been devised to decrease the waiting time for a website to load on a user’s first visit. However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the app’s response is also important. Native apps feel snappy, and web apps are expected to behave the same, even on less than ideal internet connections.
A number of modern JavaScript frameworks have sprung up that can be very effective at tackling this problem. React can be safely considered among the most popular and robust JavaScript libraries you can use to create fast, interactive user interfaces for web apps.
In this article, I’m going to talk about what React is good at and what makes it work, which should provide you with some context to help you decide if this library could be a good fit for your next project.
What Is React?
React is a Facebook creation which simply labels itself as being a JavaScript library for building user interfaces
.
It’s an open-source project which, to date, has raked in over 74,000 stars on GitHub.
React is:
- Declarative: you only need to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
- Component-based: you create your React-powered apps by assembling a number of encapsulated components, each managing its own state.
- Learn Once, Write Anywhere: React is not a full-blown framework; it’s just a library for rendering views.
How Does the Virtual DOM Work?
The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes. Let’s look closer into its mechanism.
The HTML Document Object Model or DOM is a
programming interface for HTML and XML documents. … The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages. — MDN
Whenever you want to change any part of a web page programmatically, you need to modify the DOM. Depending on the complexity and size of the document, traversing the DOM and updating it could take longer than users might be prepared to accept, especially if you take into account the work browsers need to do when something in the DOM changes. In fact, every time the DOM gets updated, browsers need to recalculate the CSS and carry out layout and repaint operations on the web page.
React enables developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.
The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.
Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
Updating UI Changes with the Virtual DOM
When it comes to updating the browser’s DOM, React roughly follows the steps below:
- Whenever something changes, React re-renders the entire UI in a Virtual DOM representation.
- React then calculates the difference between the previous Virtual DOM representation and the new one.
- Finally, React patches up the real DOM with what has actually changed. If nothing has changed, React won’t be dealing with the HTML DOM at all.
One would think that such a process, which involves keeping two representations of the Virtual DOM in memory and comparing them, could be slower than dealing directly with the actual DOM. This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React and its Virtual DOM a great choice for building performant apps.
Is React Good for Every Project?
As the name itself suggests, React is great at making super reactive user interfaces — that is, UIs that are very quick at responding to events and consequent data changes. This comment about the name React made by Jordan Walke, engineer at Facebook, is illuminating:
This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting. — Vjeux, “Our First 50,000 Stars“
Although some would argue that all projects need React, I think it’s uncontroversial to say that React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.
React is designed to deal with stateful components in an efficient way (which doesn’t mean devs don’t need to optimize their code). So projects that would benefit from this capability can be considered good candidates for React.
Chris Coyier outlines the following, interrelated situations when reaching for React makes sense, which I tend to go along with:
- Lots of state management and DOM manipulation. That is, enabling and disabling buttons, making links active, changing input values, closing and expanding menus, etc. In this kind of project, React makes managing stateful components faster and easier. As Michael Jackson, co-author of React Router, aptly put it in a Tweet:
Point is, React takes care of the hard part of figuring out what changes actually need to happen to the DOM, not me. That’s *invaluable*
- Fighting spaghetti. Keeping track of complex state by directly modifying the DOM could lead to spaghetti code, at least if extra attention isn’t paid to code organization and structure.
Resources
If you’re curious about how React and its Virtual DOM work, here’s where you can learn more:
- Learn React with SitePoint’s comprehensive React hub.
- React Videos from Facebook Engineers
- “The Real Benefits of the Virtual DOM in React.js“, by Chris Minnick
- “The difference between Virtual DOM and DOM“, by Bartosz Krajka
- “React is Slow, React is Fast: Optimizing React Apps in Practice“, by François Zaninotto
- “How to Choose the Right Front-end Framework for Your Company“, by Chris Lienert
Conclusion
React and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes. One underlying goal can be identified in the desire to bridge the gap between web apps and native apps: users expect web apps to feel smooth and seamless like native apps.
This is the direction towards which modern web development is heading. It’s not by chance that the latest update of Create React App, a project that makes possible the creation of React apps with zero configuration, has shipped with the functionality of creating progressive web apps (PWAs) by default. These are apps that leverage service workers and offline-first caching to minimize latency and make web apps work offline.
We’ve teamed up with Open SourceCraft to bring you 6 Pro Tips from React Developers. For more open source content, check out Open SourceCraft.
Frequently Asked Questions about React’s Virtual DOM
What is the Virtual DOM in React?
The Virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. In React, when you render a JSX element, every single virtual DOM object gets updated.
How does the Virtual DOM work?
The Virtual DOM works in three simple steps. First, whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. Then, the difference between the previous DOM representation and the new one is calculated. Finally, the real DOM will be updated with only the things that have actually changed. This is much more efficient than updating the entire DOM and leads to increased performance.
How does React’s Virtual DOM improve performance?
React’s Virtual DOM improves performance by minimizing the amount of direct manipulation of the DOM, which is a slow operation in any browser. Instead of updating the entire DOM every time a change occurs, React only updates the parts of the DOM that need to be updated. This results in a significant performance boost.
What is the difference between the Real DOM and the Virtual DOM?
The Real DOM is the actual representation of the webpage in the browser while the Virtual DOM is a virtual representation of the webpage in memory. The Virtual DOM is faster and more efficient because it only updates parts of the Real DOM that have changed, rather than updating the entire DOM every time a change occurs.
What is JSX in React?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript, produced by Facebook, which allows for HTML/XML-like text to exist within JavaScript. You can write HTML structures in the same file that contains JavaScript code.
How does React use JSX?
React uses JSX to render elements on the DOM. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements and also makes it easier to write and add HTML in React.
What is reconciliation in React?
Reconciliation is the process through which React updates the DOM. When a component’s state changes, React needs to determine whether an actual DOM update is necessary. It does this by creating a new virtual DOM and comparing it with the old one. Only in places where there is a difference does React update the real DOM.
How does React handle events?
React creates its own event system which is fully compatible with the W3C object model. React implements a synthetic event system that brings consistency and high performance to React applications and interfaces. It achieves this by delegating events to the root of the document and then mapping them back to the appropriate component element.
What is the role of components in React?
Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. It splits the UI into independent, reusable parts that can be processed separately.
How does React handle forms?
In HTML, form elements such as , <textarea>, and
Maria Antonietta PernaMaria Antonietta Perna is a teacher and technical writer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding or writing for the web, she enjoys reading philosophy books, taking long walks, and appreciating good food.
