One of the advancements in the feature sets of React is Concurrent Mode, which, (at time of writing) is still experimental and not actually part of the official React library, although developers can use it conceptually.

What is Concurrent Mode?

Concurrent Mode is a set of new features. These new features help React applications stay responsive and adjust to the user's device capabilities and their network speed.

Without Concurrent Mode large applications are 'block rendered' from various sources.

With Concurrent Mode however, developers can work ‘concurrently’. This means the rendering process is broken down into smaller tasks, which can be switched between according to their priority. A process called Interruptible, or Interpretative Rendering, streamlines rendering.

Website visitors see the benefits of interruptible rendering when they’re filling in a search form that collects data in the background, such a long list of products, and then return the relevant data to their search query. React doesn’t need to block the browser from updating the text input. It renders the updated list ‘on the fly’.

To use Concurrent Mode, install it via your desired package manager. For this example NPM is used.

NPM install

This installs the experimental versions of React and React-DOM. Render it with:

React dom

Concurrent Mode: Core features

  • Suspense fetching data
  • Transitions

Suspense fetching data

The Suspense feature allows developers to use promises to allow components to ‘wait’ for something before rendering. This means you don’t have to wait for the response to come back before you start rendering, allowing you to render and fetch simultaneously.

The following example demonstrates the rendering of two components in a conceptual Sitecore CMS component showing employees and their annual leave bookings:

Suspense fetching data

The above example shows an API waterfall effect. This is due to the rendering of the AnnualLeave component only when details are ready and rendered.

Using Suspense alleviates this by displaying placeholders using the Supense fallback attribute. And because the new Concurrent features are being used, it can render the component 'on the fly' and show the placeholder whilst the API call initiates.

Suspense fallback

Employees with annual leave
 
Employees with annual leave dates 

Transitions

useTransitions is a hook which allows you to wait until the component has received the data before falling back to a spinner or another fallback component.

This is desirable for users to ‘stay’ in the current state until the new data has been pulled down and can finally be revealed. This hook returns two values:

  • startTransition: A function used to determine which update to defer
  • isPending:  Boolean, used to determine whether a transition is ongoing

Transitions

For a better user experience add in a loading indicator:

Loading transition

Concurrent Mode: Initial conclusion

React Concurrent Mode is extremely powerful. It's fast and enhances the performance of React applications.

There’s a plethora of UI patterns available when integrating with React Concurrent Mode, which can be found within the official documentation.

As stated earlier however, React Concurrent Mode is still in the experimental phase with no official release date yet. The development team at Codehouse is looking forward to its release.

At Codehouse we're constantly exploring new technologies and challenges that will improve the development process and the end user's digital experience. We continually work on exciting design and build projects often on CMSs like Sitecore.