New API for top-level updates #10624

acdlite · 2017-09-06T18:33:02Z

Introduces an additional, new API for performing top-level updates in React DOM:

// Existing API
ReactDOM.render(<App foo="A" />, container); // mount
ReactDOM.render(<App foo="B" />, container); // update
ReactDOM.unmountComponentAtNode(container); // unmount


// New API
const root = ReactDOM.unstable_createRoot(container);

// Simple
root.render(<App foo="A" />); // mount
root.render(<App foo="B" />); // update
root.unmount(); // unmount

// With pre-rendering
const work = root.prerender(<App foo="C" />); // Begin rendering but don't flush yet.
await work; // Wait for work to complete. Still don't flush yet.
work.commit(); // Synchronously flush changes

// Start prerendering before container is available
let container;
const root = ReactDOM.unstable_createRoot(function getContainer() {
  return container;
});
root.prerender(<App foo="A" />); // Begin rendering but don't flush yet.
container = await promiseForContainer;
work.commit(); // Synchronously flush remaining work

(Will fill in with more details later regarding motivations and use cases.)

I had thought we might be able to implement the existing API (ReactDOM.render) on top of the new API, but the semantics of the .then callback are sufficiently different that I don't think it's possible without a breaking change.

Work-in-progress:

Depends on expiration times PR #10426

sebmarkbage · 2017-09-07T00:55:59Z

src/renderers/dom/fiber/ReactDOMFiberEntry.js

 var ReactDOMFiber = {
+  unstable_create(


As much as I like the flushSync(batch) naming convention, this might be a bit too overloaded and vague.

unstable_createRoot?

Works for me. (I figure we can have a team bikeshedding meeting before we land this :D)

sebmarkbage · 2017-09-07T00:56:37Z

src/renderers/dom/fiber/ReactDOMFiberEntry.js

 var ReactDOMFiber = {
+  unstable_create(
+    container: DOMContainer | (() => DOMContainer),
+    namespace: ?string,


Isn't this suppose to be namespace ?: string?

Ooh, didn't know Flow treated those differently.

sebmarkbage · 2017-09-07T00:58:27Z

Did we figure out how the hydrate API fits into this?

acdlite · 2017-09-07T01:00:34Z

Nope, I'll add that to the todos

acdlite · 2017-09-08T20:58:43Z

src/renderers/shared/fiber/__tests__/ReactIncrementalRoot-test.js

+    expect(root.getChildren()).toEqual([span('A')]);
+  });
+
+  it('resolves `then` callback synchronously if tree is already completed', () => {


Hmm, is this behavior really necessary for work that prerendered async? Or is it only relevant to sync work?

gaearon · 2017-09-08T22:27:13Z

Is it not confusing that something that looks thenable doesn't behave like a promise (zalgo)?

acdlite · 2017-09-09T00:51:56Z

@gaearon We thought it was valuable to be able to implement the normal root.render API on top of the root.prerender API, including in sync mode. It might be confusing, but I think we can reasonably assume that prerender is an advanced, lower-level API that will be used by relatively few people, at least directly. Also, if you await a thenable, it's automatically wrapped in a promise.

Prevents a push/pop mismatch when bailing out on HostRoots. This is currently unobservable, because HostRoots never bail out on low priority, but this does happen with prerendering. I found this when rebasing facebook#10624 on top of master.

Prevents a push/pop mismatch when bailing out on HostRoots. This is currently unobservable, because HostRoots never bail out on low priority, but this does happen with prerendering. I found this when rebasing #10624 on top of master.

reactjs-bot · 2017-09-29T07:27:40Z

Deploy preview ready!

Built with commit 24b7272

https://deploy-preview-10624--reactjs.netlify.com

reactjs-bot · 2017-09-29T07:33:00Z

Deploy preview ready!

Built with commit f59a531

https://deploy-preview-10624--reactjs.netlify.com

An expiration time represents a time in the future by which an update should flush. The priority of the update is related to the difference between the current clock time and the expiration time. This has the effect of increasing the priority of updates as time progresses, to prevent starvation. This lays the initial groundwork for expiration times without changing any behavior. Future commits will replace work priority with expiration times.

Instead of a priority, a fiber has an expiration time that represents a point in the future by which it should render. Pending updates still have priorities so that they can be coalesced. We use a host config method to read the current time. This commit implements everything except that method, which currently returns a constant value. So this just proves that expiration times work the same as priorities when time is frozen. Subsequent commits will show the effect of advancing time.

shouldComponentUpdate was removed from functional components. Running the demo shows, now that expiration is enabled, the demo does not starve. (Still won't run smoothly until we add back the ability to resume interrupted work.)

There are a few cases related to sync mode where we need to distinguish between work that is scheduled as task and work that is treated like task because it expires. For example, batchedUpdates. We don't want to perform any work until the end of the batch, regardless of how much time has elapsed.

- Rename Done -> NoWork - Use max int32 instead of max safe int - Use bitwise operations instead of Math functions

Refactors the complete phase to add support for blocking a tree from committing. Also adds a basic version of "resuming" for HostRoots. Neither of these features are actually implemented in this commit; will come later.

We can perform work in the render and complete phases even before we have access to the DOM container. We only need the namespace. Once we get to the commit phase, throw if we don't have a DOM container.

We'll use an UpdateQueue to store top-level completion callbacks.

`renderer.updateRoot` returns a Work object, which has methods `then` and `commit`. - `then` schedules a callback to fire once the update has completed. It resolves synchronously if the tree has already completed. - `commit` synchronously flushes all the remaining work.

This makes the types for UpdateQueue a bit more sound though it's still not quite right. Not sure how to properly State so that it works with partial state updates, replaceState, and updater functions. This at least gives us more safety for non-Fiber update queues, like FiberRoot's completionCallbacks queue.

More unit tests. These completion callbacks (as I'm calling them) have some interesting properties.

A bit more descriptive

We need to process completion callbacks in two places. The first is intuitive: right after a root completes. It might seem like that is sufficient. But if a completion callback is scheduled on an already completed root, it's possible we won't complete that root again. So we also need to process completion callbacks whenever we skip over an already completed root.

This is the main reason Work is a thenable and not a promise.

`forceExpire` is tracked per root rather than per scheduler.

Hydration should be disabled by default. It's also incompatible with lazy containers, since you can only hydrate a container that has already resolved. After considering these constraints, we came up with this API: createRoot(container: Element, ?{hydrate?: boolean}) createLazyRoot(container: () => Element, ?{namespace?: string, ownerDocument?: Document})

scheduleWork updates the priority of the fiber and its ancestors and schedules work to be performed. scheduleUpdate inserts an update into a fiber's update queue and calls then schedules work with scheduleWork. Now we don't have to export so many things from the scheduler.

After thinking about how to implement blockers in general, I figured out how to simplify top-level blockers, too.

gaearon · 2018-01-05T16:16:38Z

Seems stale and superseded by #11225.

NE-SmallTown · 2018-04-13T08:07:18Z

@acdlite Is there any explanation why we drop this?

acdlite requested review from sebmarkbage and flarnie September 6, 2017 18:33

facebook-github-bot added the CLA Signed label Sep 6, 2017

acdlite force-pushed the newtoplevelapi branch 2 times, most recently from 036f294 to 3a91a5d Compare September 6, 2017 22:33

sebmarkbage reviewed Sep 7, 2017

View reviewed changes

acdlite force-pushed the newtoplevelapi branch 2 times, most recently from 6420547 to 7887ceb Compare September 8, 2017 20:57

acdlite commented Sep 8, 2017

View reviewed changes

acdlite force-pushed the newtoplevelapi branch 2 times, most recently from 1e7100e to 9f81d8c Compare September 9, 2017 00:22

acdlite force-pushed the newtoplevelapi branch 3 times, most recently from 2e7eac6 to ad1dc28 Compare September 14, 2017 18:17

acdlite mentioned this pull request Sep 14, 2017

Push host root context when bailing out on low priority #10712

Merged

acdlite force-pushed the newtoplevelapi branch 2 times, most recently from 8422a91 to f31b7ab Compare September 14, 2017 18:34

acdlite mentioned this pull request Sep 15, 2017

Deterministic updates #10715

Merged

acdlite changed the title ~~[Work-in-progress] New API for top-level updates~~ New API for top-level updates Sep 29, 2017

acdlite force-pushed the newtoplevelapi branch from f31b7ab to 24b7272 Compare September 29, 2017 07:22

acdlite force-pushed the newtoplevelapi branch from f59a531 to c3b6342 Compare September 29, 2017 07:29

acdlite force-pushed the newtoplevelapi branch from 081111b to 75e2a6e Compare October 8, 2017 03:58

acdlite added 12 commits October 9, 2017 10:03

Triangle Demo should use a class

6d1e2d8

shouldComponentUpdate was removed from functional components. Running the demo shows, now that expiration is enabled, the demo does not starve. (Still won't run smoothly until we add back the ability to resume interrupted work.)

Use current time to calculate expiration time

466c746

Add unit tests for expiration and coalescing

7900fed

Delete unnecessary abstraction

a0df0b6

Move performance.now polyfill to ReactDOMFrameScheduling

4cd7cbe

Add expiration to fuzz tester

e26e737

Expiration nits

2bbd1c5

- Rename Done -> NoWork - Use max int32 instead of max safe int - Use bitwise operations instead of Math functions

Initial version of blocking & top-level resuming

70b82f7

Refactors the complete phase to add support for blocking a tree from committing. Also adds a basic version of "resuming" for HostRoots. Neither of these features are actually implemented in this commit; will come later.

Change DOM renderer Container type to a union of String | DOMContainer

3d5c12b

We can perform work in the render and complete phases even before we have access to the DOM container. We only need the namespace. Once we get to the commit phase, throw if we don't have a DOM container.

acdlite force-pushed the newtoplevelapi branch from 75e2a6e to f10215d Compare October 9, 2017 17:10

acdlite added 12 commits October 9, 2017 11:16

Split UpdateQueue functions to make it more generic

9154198

We'll use an UpdateQueue to store top-level completion callbacks.

Completion callbacks resolve synchronously if tree is already complete

4ea93cd

More unit tests. These completion callbacks (as I'm calling them) have some interesting properties.

renderer.create -> renderer.createRoot

e73da46

A bit more descriptive

Change optional type to optional parameter

d3fa711

Add test for then resolving synchronously for sync updates

e2abf2e

This is the main reason Work is a thenable and not a promise.

Committing a update on one root should not flush work on another root

a4be91e

`forceExpire` is tracked per root rather than per scheduler.

Simplify top-level blockers

9297052

After thinking about how to implement blockers in general, I figured out how to simplify top-level blockers, too.

acdlite force-pushed the newtoplevelapi branch from f10215d to 9297052 Compare October 9, 2017 18:23

gaearon closed this Jan 5, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New API for top-level updates #10624

New API for top-level updates #10624

acdlite commented Sep 6, 2017 •

edited

Loading

sebmarkbage Sep 7, 2017

acdlite Sep 7, 2017

sebmarkbage Sep 7, 2017

acdlite Sep 7, 2017

sebmarkbage commented Sep 7, 2017

acdlite commented Sep 7, 2017

acdlite Sep 8, 2017 •

edited

Loading

gaearon commented Sep 8, 2017

acdlite commented Sep 9, 2017 •

edited

Loading

reactjs-bot commented Sep 29, 2017

reactjs-bot commented Sep 29, 2017

gaearon commented Jan 5, 2018

NE-SmallTown commented Apr 13, 2018

New API for top-level updates #10624

New API for top-level updates #10624

Conversation

acdlite commented Sep 6, 2017 • edited Loading

sebmarkbage Sep 7, 2017

Choose a reason for hiding this comment

acdlite Sep 7, 2017

Choose a reason for hiding this comment

sebmarkbage Sep 7, 2017

Choose a reason for hiding this comment

acdlite Sep 7, 2017

Choose a reason for hiding this comment

sebmarkbage commented Sep 7, 2017

acdlite commented Sep 7, 2017

acdlite Sep 8, 2017 • edited Loading

Choose a reason for hiding this comment

gaearon commented Sep 8, 2017

acdlite commented Sep 9, 2017 • edited Loading

reactjs-bot commented Sep 29, 2017

reactjs-bot commented Sep 29, 2017

gaearon commented Jan 5, 2018

NE-SmallTown commented Apr 13, 2018

acdlite commented Sep 6, 2017 •

edited

Loading

acdlite Sep 8, 2017 •

edited

Loading

acdlite commented Sep 9, 2017 •

edited

Loading