Article originally posted on InfoQ. Visit InfoQ

Concurrent Mode refers to a set of newly-released experimental features in React that aim to increase the responsiveness of applications by using interruptible rendering. 

JavaScript is a single thread language. When a long process is running, the UI locks down, which can cause a jarring experience to the user. While the React development team has been diligently working on improving the library performance, they are an inherent part of the language and depending on the user device capabilities. The size of the application can happen quite regularly.

A good example would be filtering a very large list of items. Every time the user presses a key, our application filters the data and re-renders the list. While a naive implementation works well on small lists, users will start experiencing stutter between keystrokes as the amount of data we handle grows.

The cause of the stutter is simple; the rendering process is not interruptable, and while the browser is busy rendering the new list, it simply can’t handle another change to the input field. Today we solve this problem by either debouncing or throttling the search, but these are just workarounds that reduce the number of searches we perform instead of handling the core problem.

With the new Concurrent Mode, this is no longer a problem, as the rendering can be stopped when more important events, like user interactions, happen. In our case, when the user presses another key, React interrupts the render and allows the browser to display the new character. Behind the scenes, React starts to render the updated list in memory and only updates it back to the screen when the rendering completes.  

The good news is that a lot of the complicated changes to React are happening behind the scenes, and existing applications will continue to work with improved responsiveness. 

At the same time, React is introducing a new mechanic called suspense that will become the primary way of reading asynchronous data from components. It combines the Suspense component (that was introduced in React 16.6) and a new mechanism that enables components to communicate with React and let it know when they are ready to be rendered. 

A simplified version of the React example looks something like this: 

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
    </Suspense>
  );
}

function ProfileDetails() {
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

The Suspense component tells React to display a loading message while we wait for ProfileDetails to finish loading.

The real magic happens inside the fetchProfileData that wraps the data fetching process with a second promise that uses a standardized API. Using the second promise, React can tell if a component is still fetching data. You can see how React wraps the response in the official example, but this is just a demo and production application will need to implement a more robust solution.

The Facebook team has already implemented this mechanic into the new version of Relay and expects other libraries to implement it in the coming months.

React Suspense is still an experimental feature and is not part of the stable build. You can read more about it in the official React docs.