Preview: ReactJS Concurrent Mode

Introducing the New Render Engine

Matthew Tyson
Mar 13 · 3 min read

The React engine is evolving to incorporate some advanced rendering capabilities. Read on to get an overview of the new, incoming Concurrent Render Mode.


This is pretty exciting.

“…a certain amount of work in your components will always cause stutter… Concurrent Mode fixes this fundamental limitation by making rendering interruptible.”

That is from the React Docs, which does a good in-depth job of describing the upcoming Concurrent Mode. It is available now, as an experimental feature in React 16.6+.

What I’m going to do here is give a condensed overview in case you don’t have the bandwidth to plow through the whole doc.


The basic idea behind this technique is that the render engine is going to accept updates from the app that imply UI updates, and apply them first to memory.

The purpose is to make drawing the UI smoother.

In-flight updates are applied to the virtual dom first, and then written to the screen.

Instead of relying on the developer to use debounce or throttle (which are limited in effectiveness anyway) to avoid choppy UI updates, the render engine is going to take on the task of mediating between data changes and screen writes.


I think the React team is really going the extra mile for developers with this feature. They have put a lot of thought and research into how to maximize the user’s experience, and then incorporated it into the framework (…library) itself.


The API for harnessing these capabilities is still in flux, and you have to install it explicitly like so:

npm install react@experimental react-dom@experimental

Concurrent mode is a global change to the way react works, and requires that the root level node be passed through the concurrent engine. This is done by calling createRoot on the app root, instead of just `reactDOM.render()`:

ReactDOM.createRoot(
document.getElementById('root')
).render(<App />);

(createRoot is only available if you’ve installed the experimental package)

Because it is a fundamental change larger, existing codebases are likely not compatible with it. Especially the lifecycle methods that are now prepended with UNSAFE are not compatible.

Because of this fact, React is introducing a middle-step between the old-school render engine that we use today, and the concurrent mode. This is called “blocking mode” and it is more backwards compatible, but with fewer concurrent features.

In the long-term, Concurrent Mode will become the default.

In the mid-term, React will support the following three modes (This is straight from this doc):

  • Legacy Mode: ReactDOM.render(<App />, rootNode). This is what React apps use today. There are no plans to remove the legacy mode in the observable future — but it won’t be able to support these new features.
  • Blocking Mode: ReactDOM.createBlockingRoot(rootNode).render(<App />). It is currently experimental. It is intended as a first migration step for apps that want to get a subset of Concurrent Mode features.
  • Concurrent Mode: ReactDOM.createRoot(rootNode).render(<App />). It is currently experimental. In the future, after it stabilizes, we intend to make it the default React mode. This mode enables all the new features.

Come Visit!

JavaScript in Plain English

Learn the web's most important programming language.

Matthew Tyson

Written by

www.wholisticsoftware.com

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.3K

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade