This article introduces you to the idea behind React’s concurrent mode as well as some of its usage and benefits. React’s concurrent mode is an innovative set of features designed to improve the handling of asynchronous rendering. These improvements make for a better end-user experience.

One of the perennial issues that has dogged web clients since time immemorial is dealing with rendering of asynchronous updates. The React team continues its tradition of introducing ambitious solutions into the framework by adding concurrent mode support to the React 16.x release line.

There are a variety of cases where naive rendering of changing state leads to less-than-desirable behavior including tedious loading screens, choppy input handling, and unnecessary spinners, to name a few.

Addressing such issues piecemeal is error-prone and inconsistent. React’s concurrent mode represents a wholesale, baked-into-the-framework solution. The core idea: React now draws updates concurrently in memory, supports interruptible rendering, and offers ways for application code to interact with that support.

Enabling concurrent mode in React

The API for harnessing these capabilities is still in flux, and you have to install it explicitly, like so:

npm install [email protected] [email protected]

Concurrent mode is a global change to the way React works, and requires that the root level node be passed through the concurrent engine. This is done by calling createRoot on the app root, instead of just reactDOM.render(). This is seen in Listing 1.

Copyright © 2021 IDG Communications, Inc.