The library for web and native user interfaces.
Fix isMounted() for composite components
This behavior seemed incorrect for composite components. - isComponentMounted() represents ReactComponent's lifecycle of mounting - isMounted() represents ReactCompositeComponent's lifecycle of isMounted() Therefore, ReactComponents no longer have isMounted(). I think this is fine since it was not supposed to be public anyway.
CommitSyncScript committed
Jun 24, 2013 at 16:09 UTC
14102e8a4851119afe66866735d63d7901ab470f
3 files changed
+39
-6
src/core/ReactCompositeComponent.js
+18
-4
@@ -326,8 +326,9 @@ function validateMethodOverride(proto, name) {
326
function validateLifeCycleOnReplaceState(instance) {
327
var compositeLifeCycleState = instance._compositeLifeCycleState;
328
invariant(
329
- instance.isMounted(),
330
- 'replaceState(...): Can only update a mounted component.'
329
+ instance.isMounted() ||
330
+ compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
331
+ 'replaceState(...): Can only update a mounted or mounting component.'
332
);
333
invariant(
334
compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
@@ -480,6 +481,17 @@ var ReactCompositeComponentMixin = {
481
ReactCurrentOwner.getDepth() + 1 : 0;
482
},
483
484
+ /**
485
+ * Checks whether or not this composite component is mounted.
486
+ * @return {boolean} True if mounted, false otherwise.
487
+ * @protected
488
+ * @final
489
+ */
490
+ isMounted: function() {
491
+ return ReactComponent.Mixin.isMounted.call(this) &&
492
+ this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
493
+ },
494
+
495
/**
496
* Initializes the component, renders markup, and registers event listeners.
497
*
@@ -756,8 +768,10 @@ var ReactCompositeComponentMixin = {
768
forceUpdate: function() {
769
var compositeLifeCycleState = this._compositeLifeCycleState;
770
invariant(
759
- this.isMounted(),
760
- 'forceUpdate(...): Can only force an update on mounted components.'
771
+ this.isMounted() ||
772
+ compositeLifeCycleState === CompositeLifeCycle.MOUNTING,
773
+ 'forceUpdate(...): Can only force an update on mounted or mounting ' +
774
+ 'components.'
775
);
776
invariant(
777
compositeLifeCycleState !== CompositeLifeCycle.RECEIVING_STATE &&
src/core/__tests__/ReactComponent-test.js
+19
@@ -95,4 +95,23 @@ describe('ReactComponent', function() {
95
ReactTestUtils.renderIntoDocument(instance);
96
});
97
98
+ it('should correctly determine if a component is mounted', function() {
99
+ var Component = React.createClass({
100
+ componentWillMount: function() {
101
+ expect(this.isMounted()).toBeFalsy();
102
+ },
103
+ componentDidMount: function() {
104
+ expect(this.isMounted()).toBeTruthy();
105
+ },
106
+ render: function() {
107
+ return <div/>;
108
+ }
109
+ });
110
+
111
+ var instance = <Component />;
112
+
113
+ expect(instance.isMounted()).toBeFalsy();
114
+ ReactTestUtils.renderIntoDocument(instance);
115
+ expect(instance.isMounted()).toBeTruthy();
116
+ });
117
});
src/core/__tests__/ReactCompositeComponent-test.js
+2
-2
@@ -308,7 +308,7 @@ describe('ReactCompositeComponent', function() {
308
instance.forceUpdate();
309
}).toThrow(
310
'Invariant Violation: forceUpdate(...): Can only force an update on ' +
311
- 'mounted components.'
311
+ 'mounted or mounting components.'
312
);
313
314
React.renderComponent(instance, container);
@@ -321,7 +321,7 @@ describe('ReactCompositeComponent', function() {
321
instance.forceUpdate();
322
}).toThrow(
323
'Invariant Violation: forceUpdate(...): Can only force an update on ' +
324
- 'mounted components.'
324
+ 'mounted or mounting components.'
325
);
326
});
327