Fix isMounted inside of render
This is apparently used to determine if you can access refs. Bad pattern, but a pattern nonetheless.
Sebastian Markbage committed
Feb 4, 2015 at 11:50 UTC
263800e09ba778769c36757f6187bc336cbf9ce1
3 files changed
+30
-14
src/core/ReactCompositeComponent.js
+16
-13
@@ -196,22 +196,25 @@ var ReactCompositeComponentMixin = {
196
this._pendingReplaceState = false;
197
this._pendingForceUpdate = false;
198
199
- if (inst.componentWillMount) {
200
- var previouslyMounting = ReactLifeCycle.currentlyMountingInstance;
201
- ReactLifeCycle.currentlyMountingInstance = this;
202
- try {
203
- inst.componentWillMount();
204
- } finally {
205
- ReactLifeCycle.currentlyMountingInstance = previouslyMounting;
206
- }
207
- // When mounting, calls to `setState` by `componentWillMount` will set
208
- // `this._pendingStateQueue` without triggering a re-render.
209
- if (this._pendingStateQueue) {
210
- inst.state = this._processPendingState(inst.props, inst.context);
199
+ var renderedElement;
200
+
201
+ var previouslyMounting = ReactLifeCycle.currentlyMountingInstance;
202
+ ReactLifeCycle.currentlyMountingInstance = this;
203
+ try {
204
+ if (inst.componentWillMount) {
205
+ inst.componentWillMount();
206
+ // When mounting, calls to `setState` by `componentWillMount` will set
207
+ // `this._pendingStateQueue` without triggering a re-render.
208
+ if (this._pendingStateQueue) {
209
+ inst.state = this._processPendingState(inst.props, inst.context);
210
+ }
211
}
212
+
213
+ renderedElement = this._renderValidatedComponent();
214
+ } finally {
215
+ ReactLifeCycle.currentlyMountingInstance = previouslyMounting;
216
}
217
214
- var renderedElement = this._renderValidatedComponent();
218
this._renderedComponent = this._instantiateReactComponent(
219
renderedElement,
220
this._currentElement.type // The wrapping type
src/core/__tests__/ReactComponent-test.js
+1
@@ -263,6 +263,7 @@ describe('ReactComponent', function() {
263
expect(this.isMounted()).toBeTruthy();
264
},
265
render: function() {
266
+ expect(this.isMounted()).toBeFalsy()
267
return <div/>;
268
}
269
});
src/core/__tests__/ReactComponentLifeCycle-test.js
+13
-1
@@ -260,6 +260,18 @@ describe('ReactComponentLifeCycle', function() {
260
);
261
});
262
263
+ it('is not mounted inside initial render', function() {
264
+ var InitialRender = React.createClass({
265
+ render: function() {
266
+ expect(this.isMounted()).toBe(false);
267
+ return (
268
+ <div></div>
269
+ );
270
+ }
271
+ });
272
+ ReactTestUtils.renderIntoDocument(<InitialRender />);
273
+ });
274
+
275
it('should carry through each of the phases of setup', function() {
276
var LifeCycleComponent = React.createClass({
277
getInitialState: function() {
@@ -360,7 +372,7 @@ describe('ReactComponentLifeCycle', function() {
372
ComponentLifeCycle.MOUNTED
373
);
374
expect(instance._testJournal.compositeLifeCycleInInitialRender).toBe(
363
- null
375
+ CompositeComponentLifeCycle.MOUNTING
376
);
377
378
expect(getLifeCycleState(instance)).toBe(ComponentLifeCycle.MOUNTED);