React's "Concurrent Mode" provides a set of newly-released experimental features in the JavaScript library that aim to increase the responsiveness of applications by using interruptible rendering.
JavaScript is a single-threaded language. When a long process is running (and keeping the single thread busy), the associated application UI appears to freeze, which can cause a jarring experience to the user. While the React development team has been diligently working on improving the underlying library performance, they are an inherent part of the language and also depend on the user device capabilities.
A good example would be filtering a very large list of items. Every time the user presses a key, the 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 handled 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 this component on 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 mechanism 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 function 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 mechanism into the new version of Relay, and other libraries are expected to implement this 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.