An Introductory Guide To Concurrent Rendering

The hottest topic in the React field right now is the React 18 release. In particular, the release will introduce a set of so-called concurrent rendering features. These features allow developers to opt into the concurrent rendering mechanism from React. This mechanism opens up an entirely new world of opportunities for React developers to control and optimise the experience of end-users. It is definitely one of the most exciting things we’ll receive in the world of React since hooks.

Because of this, it’s very likely that you’ve heard about concurrent rendering before. Maybe articles about it, the APIs around it, or what React 18 will bring to the table for it. However, you might be left wondering about the fundamentals of concurrent rendering. What is concurrent rendering exactly and why do we actually need it?

To help you with understanding the fundamentals, this article will go over those questions. By looking into its purpose, what problem it attempts to solve, and how it solves it, you’ll gain a solid foundation of knowledge regarding the topic of concurrent rendering.

Why do we need concurrent rendering?

One of the issues with React in its current form is that all state updates are synchronous. This means that React is only able to handle them one by one. In a lot of use cases and real-life scenarios, this is perfectly fine and won’t impose any limitations on the user experience.

But in scenarios where React would like to pick up a different state update than the one it’s currently working on, that’s plainly impossible right now. React is not able to interrupt, pause, or drop rendering an update after it has started — it’s a blocked process.

In essence, this puts an upper limitation on the process of optimising user experience. Although it’s a very high one, there still exists a limit. Every state update is treated as equally important, even if that doesn’t hold for the user experience. Certain updates can have more priority or urgency than others. Not being able to do so actually negatively impacts the user experience tremendously compared to what it could be, which is suboptimal.

What is concurrent rendering?

This is exactly where concurrent rendering comes in. Concurrent rendering is a set of features that allow your React project to opt into so-called interruptible rendering. Contrary to the previous rendering process where React was blocked, this makes the rendering process interruptible from React’s side.

This opens up a lot of new possibilities for React developers to further enhance the user experience of React applications.

It allows React to handle multiple state updates at once. However, it doesn’t mean that React will suddenly perform all the queued state updates simultaneously at once. Rather, opting into concurrent rendering allows React to think about its best course of action. Fortunately, it’s also something that we as developers can control.

Let’s say React is currently working on a state update and a different one comes in, then React can make different decisions based on a variable of factors. If the new incoming state update is marked as equally or less urgent, then nothing will change compared to the previous rendering process. React will proceed with the current state update like normal. After it finishes, it’ll pick up the new state update.

But if the new incoming state update is marked as more urgent, then React can decide to pause the current state update and handle the incoming one first. After finishing the new and more urgent state update, React will then go back to the original state update. If it determines that it’s necessary to resume it, it’ll do so. If it turns out that the state update is now irrelevant, it can decide to drop it altogether.

What’s Next

This article briefly covered one of the most exciting features that React 18 will bring to the React development field, namely concurrent rendering, and get you up to speed with the entire topic. using the knowledge in this article, you should know what concurrent rendering is, understand what problem it attempts to fix, and have an overview of how it works.

Luckily, concurrent rendering doesn’t stop here. While there are so much more aspects to concurrent rendering to understand or dive into, this article serves as an introduction to get into the whole topic and allows you to further explore React 18 starting from here.

To give you some pointers:

• This previous article of mine goes over the three new APIs that were introduced in React 18. All of them are hooks that allow certain developers to opt into concurrent rendering in certain scenarios.
• The official React 18 announcement is a great place to find out more about React 18, different features, how to adopt it, and in general everything you need to know about the upcoming React release.
• The React working group repository is a great place to learn more about the technical aspects, receive even more pointers, learn about the thought processes behind different APIs and features, and in general get a more in-depth perspective of everything in React 18.

That’s all there is! Now that you have a solid grasp on the topic of concurrent rendering, a whole new world opens up for you to explore in React 18. Go out there, explore, and enjoy this new adventure!