Give setState callbacks componentWillUpdate semantics
This matches the behavior in Fiber. Normally we would change Fiber to match Stack to minimize breaking changes for the initial release. However, in this case it would require too large a compromise to change Fiber to act like Stack.
Andrew Clark committed
Dec 7, 2016 at 18:51 UTC
a930f09dfe6f96347b035e6500b3b13e36e3c7b2
5 files changed
+28
-19
scripts/fiber/tests-failing.txt
-3
@@ -82,9 +82,6 @@ src/renderers/shared/shared/__tests__/ReactCompositeComponent-test.js
82
* should warn about `setState` in getChildContext
83
* should update refs if shouldComponentUpdate gives false
84
85
-src/renderers/shared/shared/__tests__/ReactCompositeComponentNestedState-test.js
86
-* should provide up to date values for props
87
-
85
src/renderers/shared/shared/__tests__/ReactCompositeComponentState-test.js
86
* should update state when called from child cWRP
87
scripts/fiber/tests-passing.txt
+3
@@ -1323,6 +1323,9 @@ src/renderers/shared/shared/__tests__/ReactCompositeComponentDOMMinimalism-test.
1323
* should not render extra nodes for non-interpolated text
1324
* should not render extra nodes for non-interpolated text
1325
1326
+src/renderers/shared/shared/__tests__/ReactCompositeComponentNestedState-test.js
1327
+* should provide up to date values for props
1328
+
1329
src/renderers/shared/shared/__tests__/ReactCompositeComponentState-test.js
1330
* should support setting state
1331
* should call componentDidUpdate of children first
src/renderers/shared/shared/__tests__/ReactCompositeComponentNestedState-test.js
+1
-1
@@ -111,8 +111,8 @@ describe('ReactCompositeComponentNestedState-state', () => {
111
['setState-this', 'dark blue', 'blue'],
112
['setState-args', 'dark blue', 'green'],
113
['render', 'light green', 'green'],
114
- ['parent-after-setState', 'green'],
114
['after-setState', 'light green', 'green'],
115
+ ['parent-after-setState', 'green'],
116
]);
117
});
118
});
src/renderers/shared/stack/reconciler/ReactCompositeComponent.js
+24
@@ -780,6 +780,16 @@ var ReactCompositeComponent = {
780
this._context
781
);
782
} else {
783
+ var callbacks = this._pendingCallbacks;
784
+ this._pendingCallbacks = null;
785
+ if (callbacks) {
786
+ for (var j = 0; j < callbacks.length; j++) {
787
+ transaction.getReactMountReady().enqueue(
788
+ callbacks[j],
789
+ this.getPublicInstance()
790
+ );
791
+ }
792
+ }
793
this._updateBatchNumber = null;
794
}
795
},
@@ -848,6 +858,11 @@ var ReactCompositeComponent = {
858
}
859
}
860
861
+ // If updating happens to enqueue any new updates, we shouldn't execute new
862
+ // callbacks until the next render happens, so stash the callbacks first.
863
+ var callbacks = this._pendingCallbacks;
864
+ this._pendingCallbacks = null;
865
+
866
var nextState = this._processPendingState(nextProps, nextContext);
867
var shouldUpdate = true;
868
@@ -901,6 +916,15 @@ var ReactCompositeComponent = {
916
inst.state = nextState;
917
inst.context = nextContext;
918
}
919
+
920
+ if (callbacks) {
921
+ for (var j = 0; j < callbacks.length; j++) {
922
+ transaction.getReactMountReady().enqueue(
923
+ callbacks[j],
924
+ this.getPublicInstance()
925
+ );
926
+ }
927
+ }
928
},
929
930
_processPendingState: function(props, context) {
src/renderers/shared/stack/reconciler/ReactUpdates.js
-15
@@ -135,12 +135,6 @@ function runBatchedUpdates(transaction) {
135
// that performUpdateIfNecessary is a noop.
136
var component = dirtyComponents[i];
137
138
- // If performUpdateIfNecessary happens to enqueue any new updates, we
139
- // shouldn't execute the callbacks until the next render happens, so
140
- // stash the callbacks first
141
- var callbacks = component._pendingCallbacks;
142
- component._pendingCallbacks = null;
143
-
138
var markerName;
139
if (ReactFeatureFlags.logTopLevelRenders) {
140
var namedComponent = component;
@@ -161,15 +155,6 @@ function runBatchedUpdates(transaction) {
155
if (markerName) {
156
console.timeEnd(markerName);
157
}
164
-
165
- if (callbacks) {
166
- for (var j = 0; j < callbacks.length; j++) {
167
- transaction.reconcileTransaction.getReactMountReady().enqueue(
168
- callbacks[j],
169
- component.getPublicInstance()
170
- );
171
- }
172
- }
158
}
159
}
160