Why Use React JS for Fast Interactive User Interfaces? — SitePoint

  • The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes.
  • Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
  • This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React JS and its Virtual DOM a great choice for building performant apps.
  • Our First 50,000 Stars — Vjeux

    Although some would argue that all projects need React JS, 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.

  • Resources
    If you’re curious about how React JS and its Virtual DOM work, here’s where you can learn more:

    Conclusion
    React JS and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes.

Maria Antonietta Perna discusses what makes React JS a great fit for building fast UIs and introduces the concept of the Virtual DOM and how React uses it.

@sitepointdotcom: Why Use React JS for Fast Interactive User Interfaces? :

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Nowadays users expect sleek, performant web applications that behave more and more like native apps.

Techniques have been devised to decrease the waiting time when a website gets downloaded 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 which can be very effective at tackling this problem. React JS 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 JS 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.

React JS 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 rakes in well over 67,000 stars on GitHub.

React JS is:

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.

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 JS makes possible for developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.

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.

When it comes to updating the browser’s DOM, React roughly follows the steps below:

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 JS and its Virtual DOM a great choice for building performant apps.

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:

Although some would argue that all projects need React JS, 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 JS is designed to deal with stateful components in an efficient way (which doesn’t mean devs don’t need to optimize their code), therefore projects which would benefit from this capability can be considered good candidates for React.

Chris Coyer outlines the following inter-related situations when reaching for React makes sense, which I tend to go along with:

If you’re curious about how React JS and its Virtual DOM work, here’s where you can learn more:

React JS 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 JS apps with zero configuration, has shipped with the functionality of creating progressive web apps (PWA) by default. These are apps that leverage service workers and offline-first caching to minimize latency and make web apps work offline.

Is this also the direction you’re taking your development work? Are reactive JavaScript libraries part of your toolkit?

Hit the comment box below to share!

Why Use React JS for Fast Interactive User Interfaces? — SitePoint