React.unstable_AsyncComponent #10239

acdlite · 2017-07-20T22:26:54Z

Alternative to using the static class property unstable_asyncUpdates. Everything inside has async updates by default.

sebmarkbage · 2017-07-20T23:06:49Z

Should this be AsyncComponent maybe?

acdlite · 2017-07-20T23:08:33Z

I imagine people would conflate it with React.Component and React.PureComponent and try to do

class MyComponent extends React.AsyncComponent {...}

or is that what you meant?

acdlite · 2017-07-20T23:10:54Z

We could call it AsyncWrapper to make it a bit more explicit. That's what I named the internal module.

sebmarkbage · 2017-07-20T23:10:57Z

It's not that bad if they do use the inheritance. They could use either.

acdlite · 2017-07-20T23:11:38Z

True but that prevents us in the future from changing this from a class to something else.

acdlite · 2017-07-20T23:13:00Z

But I guess that's not that important. I do like the symmetry with the other component exports.

sebmarkbage · 2017-07-20T23:16:40Z

It also solves the problem of the return value of ReactDOM.render being different because you can just use inheritance to make the root async.

acdlite · 2017-07-20T23:18:00Z

Clever! Ok you've convinced me

sebmarkbage · 2017-07-20T23:18:09Z

There is a problem using static flags though. We didn't do that for isReactComponent because Scala JS (and probably others) don't support static flags on classes so they didn't inherit those flags. Instead we put the flag on the prototype. We should probably do that instead.

sebmarkbage · 2017-07-20T23:19:16Z

It should probably also be an object instead of boolean. We did that because jest automocking sometimes screwed up the mocking the boolean as undefined. I'm not sure if that's a big problem anymore but could be.

acdlite · 2017-07-20T23:19:32Z

Interesting... ok. Is there a reason we originally went with a static flag for unstable_asyncUpdates? I can't remember.

sebmarkbage · 2017-07-20T23:39:14Z

There is no special syntax for adding a flag to a prototype (other than methods) and it's inefficient to add it to every instance instead of shared on the prototype. That's solved by the base class model.

gaearon · 2017-07-20T23:49:03Z

src/isomorphic/ReactAsyncWrapper.js

+
+const ReactBaseClasses = require('ReactBaseClasses');
+
+class ReactAsyncWrapper extends ReactBaseClasses.Component {


Can we go with very minimal function prototype thing rather than Babel class output? We’ve tried very hard to trim down isomorphic React package, class output was a bit bloated last I checked.

About to push a commit that does this the same way as PureComponent

sebmarkbage · 2017-07-20T23:54:47Z

src/isomorphic/modern/class/ReactBaseClasses.js

+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+function ComponentDummy2() {}


Can we reuse the dummy function from above? Not sure if that is worth from an optimization perspective or not.

sebmarkbage · 2017-07-20T23:57:16Z

src/isomorphic/modern/class/ReactBaseClasses.js

+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+ReactAsyncComponent.prototype = new ComponentDummy();


Might be worth adding a variable here. var ReactAsyncComponentPrototype = here so that you can use that instead of rereading the prototype below. Save a few bytes.

sebmarkbage · 2017-07-20T23:57:55Z

src/isomorphic/modern/class/ReactBaseClasses.js

+ReactAsyncComponent.prototype.constructor = ReactAsyncComponent;
+// Avoid an extra prototype jump for these methods.
+Object.assign(ReactAsyncComponent.prototype, ReactComponent.prototype);
+ReactAsyncComponent.prototype.unstable_isAsyncReactComponent = true;


Should we do = {} just like isReactComponent does?

I did it the same as PureComponent. I don't have all the context for why this is important, but if it is, we should do it for PureComponent as well.

Interesting. It might not be noticeable for PureComponent because nobody relies on shouldComponentUpdate for behavior.

However, worst case, I guess this just triggers sync mode.

Oh right, the Jest thing. Yeah, funny that the "worst case" in this situation is exactly what we'd want it to be, anyway, per our recent discussion. :D

Alternative to using the static class property unstable_asyncUpdates. Everything inside <AsyncComponent /> has async updates by default. You can also extend it like PureComponent or Component.

koba04 · 2017-09-16T08:40:17Z

@acdlite
Is there any way to use this feature?
Currently, the feature is in behind the flag ReactFeatureFlags.enableAsyncSubtreeAPI so I can't use this although the API is exposed as unstable_AsyncComponent.

I can use this feature by modifying the flag in node_modules/react-dom directly but I want to avoid it.
What reason is the feature in behind the flag?
I think it would be nice if I can use this as an opt-in feature without the above way.

koba04 · 2017-09-19T08:33:21Z

I've missed that the flag is already true.

https://github.com/facebook/react/blob/master/src/renderers/shared/utils/ReactFeatureFlags.js#L16

I've misunderstood unstable_AsyncComponent, Top level unstable_AsyncComponent and ReactDOM.flushSync() work fine for me 👏

I tried to wrap some heavy components(many list components) by unstable_AsyncComponent and update by setState from a root component.
I expected to update wrapped components asynchronously(with rIC) and others synchronously but the update seemed to be all synchronous.

<div>
  <Other />
  <AsyncComponent>
    <HeavyList />
  </AsyncComponent>
</div>

NE-SmallTown · 2017-09-20T01:22:18Z

react/src/renderers/dom/shared/ReactDOMFeatureFlags.js

Line 15 in 34927ea

fiberAsyncScheduling: false,

I thinks maybe that's because above flag is false?But I find:

react/src/renderers/shared/fiber/ReactFiberReconciler.js

Lines 225 to 233 in c55ffb3

    
           // Check if the top-level element is an async wrapper component. If so, treat 
        
           // updates to the root as async. This is a bit weird but lets us avoid a separate 
        
           // `renderAsync` API. 
        
           const forceAsync = 
        
             ReactFeatureFlags.enableAsyncSubtreeAPI && 
        
             element != null && 
        
             element.type != null && 
        
             element.type.prototype != null && 
        
             (element.type.prototype: any).unstable_isAsyncReactComponent === true;

It seems that just enableAsyncSubtreeAPI is true can works. And from

react/src/renderers/shared/fiber/__tests__/ReactIncrementalScheduling-test.js

Line 174 in de05d2e

it('can opt-in to async scheduling inside componentDidMount/Update', () => {

we can do this in cDM/cDU.

And IIRC, async render will be enabled at least react-17, so I am not sure why they plan to do this just now.

@acdlite ping~

acdlite requested a review from sebmarkbage July 20, 2017 22:26

facebook-github-bot added the CLA Signed label Jul 20, 2017

gaearon reviewed Jul 20, 2017

View reviewed changes

acdlite force-pushed the React.unstable_Async branch from 913c82c to 8fd95a2 Compare July 20, 2017 23:51

acdlite changed the title ~~React.unstable_Async~~ React.unstable_AsyncComponent Jul 20, 2017

sebmarkbage reviewed Jul 20, 2017

View reviewed changes

acdlite force-pushed the React.unstable_Async branch 2 times, most recently from f92982f to 229195b Compare July 20, 2017 23:56

sebmarkbage reviewed Jul 20, 2017

View reviewed changes

React.unstable_AsyncComponent

cd071a9

Alternative to using the static class property unstable_asyncUpdates. Everything inside <AsyncComponent /> has async updates by default. You can also extend it like PureComponent or Component.

acdlite force-pushed the React.unstable_Async branch from 229195b to cd071a9 Compare July 21, 2017 00:02

sebmarkbage approved these changes Jul 21, 2017

View reviewed changes

acdlite merged commit ae430b7 into facebook:master Jul 21, 2017

gaearon mentioned this pull request Mar 29, 2022

Add React 18 changelog #24195

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React.unstable_AsyncComponent #10239

React.unstable_AsyncComponent #10239

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017 •

edited

Loading

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017 •

edited

Loading

acdlite commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

gaearon Jul 20, 2017

acdlite Jul 20, 2017

sebmarkbage Jul 20, 2017

acdlite Jul 20, 2017

sebmarkbage Jul 20, 2017

sebmarkbage Jul 20, 2017

acdlite Jul 21, 2017

sebmarkbage Jul 21, 2017

acdlite Jul 21, 2017

koba04 commented Sep 16, 2017

koba04 commented Sep 19, 2017

NE-SmallTown commented Sep 20, 2017 •

edited

Loading


		const ReactBaseClasses = require('ReactBaseClasses');

		class ReactAsyncWrapper extends ReactBaseClasses.Component {

React.unstable_AsyncComponent #10239

React.unstable_AsyncComponent #10239

Conversation

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017 • edited Loading

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017 • edited Loading

acdlite commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

acdlite commented Jul 20, 2017

sebmarkbage commented Jul 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

koba04 commented Sep 16, 2017

koba04 commented Sep 19, 2017

NE-SmallTown commented Sep 20, 2017 • edited Loading

acdlite commented Jul 20, 2017 •

edited

Loading

sebmarkbage commented Jul 20, 2017 •

edited

Loading

NE-SmallTown commented Sep 20, 2017 •

edited

Loading