Not long ago, Facebook introduced Concurrent Mode (on the day of writing this article it is still experimental).

Concurrent Mode has been built with user and development experience in mind, but this time it looks like it really has a lot to offer, and is about to be a huge step forward for React.

There are many new use cases coming up almost every day, so if you found any functionality I didn’t mention in this article, add it in a comment.

What is Concurrent Mode?

Concurrent Mode is a set of features that makes React faster and even more user (and development) friendly.

The plan is to enable React apps to be even more responsive by adjusting to the users’ device capabilities and the speed of the network.

React makers also proudly declare to make the developers’ life easier and help them […]make it as easy as possible to build apps that start fast and stay fast[…], no matter how big they grow.

Rendering

If you think of the most important factor in user experience (from the development point of view) it will be rendering. The faster the rendering, the better the feeling of an app is.

But since a simple user may not feel the big difference between milliseconds, for the developer it means quite a lot, as he has to deal with much more rendering “behind the scenes”.

React became already popular thanks to Virtual DOM - it scans and detects only the changes in the DOM, without a need to build the entire DOM structure from the scratch.

However, when you want to render any update, you cannot interrupt it, and you have to wait with new updates until the previous rendering is finished.

Well, not anymore.

In Concurrent Mode, rendering is interruptible.

Simply speaking, concurrent rendering is when you can render component trees without any harm and blocks in the main UI thread.

This enables you to start the new UI updates before the old one is finished.

Suspense for Data Fetching

One of the most exciting things in Concurrent Mode is Suspense for Data Fetching.

Now you can use <Suspense> component to wait not only for a code to load but actually, for everything else you want to fetch, declaratively.

In other words, you don’t have to wait for the response to come back before you start rendering. You can now start rendering and fetching at the same time.

It can also solve many race conditions, improve the general user experience, and enable new features that weren’t possible before.

Summary

Concurrent Mode already opens many interesting doors, and I suppose this is just the beginning.

The goal of making the web faster and more user-friendly is the same since always, but this time, the future becomes incredibly interesting thanks to React and its features.

For more usage tips go to this webpage.