instance.unstable_asyncUpdates = true creates an async subtree
Same behavior as unstable_asyncRender. Can be used to wrap a specific subtree, rather than an entire root.
Andrew Clark committed
Apr 17, 2017 at 14:56 UTC
609e97ebe7fb9abfe6d4fedf36ad132ede2ac80d
2 files changed
+50
src/renderers/dom/fiber/__tests__/ReactDOMFiberAsync-test.js
+46
@@ -70,6 +70,52 @@ describe('ReactDOMFiberAsync', () => {
70
jest.runAllTimers();
71
expect(container.textContent).toEqual('1');
72
});
73
+
74
+ it('unstable_asyncUpdates creates an async subtree', () => {
75
+ let instance;
76
+ class Component extends React.Component {
77
+ state = {step: 0};
78
+ unstable_asyncUpdates = true;
79
+ render() {
80
+ instance = this;
81
+ return <div>{this.state.step}</div>;
82
+ }
83
+ }
84
+
85
+ ReactDOM.render(<Component />, container);
86
+ jest.runAllTimers();
87
+
88
+ instance.setState({step: 1});
89
+ expect(container.textContent).toEqual('0');
90
+ jest.runAllTimers();
91
+ expect(container.textContent).toEqual('1');
92
+ });
93
+
94
+ it('updates inside an async subtree are async by default', () => {
95
+ class Component extends React.Component {
96
+ unstable_asyncUpdates = true;
97
+ render() {
98
+ return <Child />;
99
+ }
100
+ }
101
+
102
+ let instance;
103
+ class Child extends React.Component {
104
+ state = {step: 0};
105
+ render() {
106
+ instance = this;
107
+ return <div>{this.state.step}</div>;
108
+ }
109
+ }
110
+
111
+ ReactDOM.render(<Component />, container);
112
+ jest.runAllTimers();
113
+
114
+ instance.setState({step: 1});
115
+ expect(container.textContent).toEqual('0');
116
+ jest.runAllTimers();
117
+ expect(container.textContent).toEqual('1');
118
+ })
119
});
120
}
121
});
src/renderers/shared/fiber/ReactFiberClassComponent.js
+4
@@ -305,6 +305,10 @@ module.exports = function(
305
instance.refs = emptyObject;
306
instance.context = getMaskedContext(workInProgress, unmaskedContext);
307
308
+ if (instance.unstable_asyncUpdates === true) {
309
+ workInProgress.contextTag |= AsyncUpdates;
310
+ }
311
+
312
if (typeof instance.componentWillMount === 'function') {
313
if (__DEV__) {
314
startPhaseTimer(workInProgress, 'componentWillMount');