Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

You can think of React rendering as being split into two main phases:

  • the render phase, where we compare the new tree with the existing tree and calculate the changes that need to be made. This phase is free of side-effects, so it can be done asynchronously. The work can also be interrupted, rebased, restarted, and interleaved with other updates.
  • the commit phase, where the changes computed during the render phase are flushed to the screen. This phase is typically very fast and is performed synchronously to avoid inconsistencies.

Because these two phases are separate, we can expose an API to the developer to control exactly when the commit phase is executed. Before then, the async work can be completed, but nothing is actually updated on the screen. That way we can coordinate React's commit phase with non-React renderers.

The new API will look like this:

const root = ReactDOM.unstable_createRoot(containerEl);
const work = root.prerender(<App />);
// ... other async work ...
work.commit();

You can also await work to ensure that the render phase is complete. (If you don't, the remaining work is flushed synchronously, which may or may not be what you want.)

const work = root.prerender(<App />);
await work;
work.commit();

Another neat feature is the ability to start rendering before the DOM container is even available:

let containerEl;
const root = ReactDOM.unstable_createLazyRoot(function getContainer() {
 return containerEl;
});
const work = root.prerender(<App />);
containerEl = await promiseForContainer;
work.commit();

Play around with the demo and see for yourself! Hopefully this helps illustrate how async rendering in React can be used to build products.

We'll share more demos and examples in the future.

@NE-SmallTown
Copy link

NE-SmallTown commented Sep 26, 2017

@acdlite Hi, can you reply some issues under your react-fiber-architecture repo? Thanks! :)

@acdlite
Copy link
Author

acdlite commented Sep 26, 2017

@NE-SmallTown Hey, I'll try to get to those issues as soon as I can. That repo is likely headed for a complete rewrite, with content focused a bit more on use cases and examples as in this Gist. Thanks for your patience!

@NE-SmallTown
Copy link

NE-SmallTown commented Sep 28, 2017

@acdlite Happy to hear about that, thanks for your great work :)

@xgqfrms-GitHub
Copy link

xgqfrms-GitHub commented Oct 8, 2017

@funwithtriangles
Copy link

funwithtriangles commented Nov 25, 2017

When can we expect to see this in production? Looks like it would fix some perf issues I'm having.

@lixiaoyan
Copy link

lixiaoyan commented Jan 26, 2018

I found another thing called "React.unstable_AsyncComponent" in the source code. Could you explain what it is and why we need it?

@sw-yx
Copy link

sw-yx commented Mar 31, 2018

lagradar2

just wanted to share how this demo looks together with the lag radar from dan abramov's talk.. pretty clear when the red lag shows up!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment