Drop the _owner and _lifeCycle field on internal instances

The _owner field is unnecessary since it's reachable from _currentElement. The _lifeCycle field is unnecessary because an internal component should not even need to exist at all if it's unmounted. It should be dereferenced internally, and never exposed externally. The only case where it's important is for batching updates where we currently avoid calling performUpdateIfNecessary if it's mounted. However, this function is already only executed "if necessary" so we just make sure that it's not necessary after unmount by resetting all the pending fields.

Author: sebmarkbage

src/core/ReactComponent.js

@@ -20,21 +20,6 @@ var assign = require('Object.assign');
 var invariant = require('invariant');
 var keyMirror = require('keyMirror');
 
-/**
- * Every React component is in one of these life cycles.
- */
-var ComponentLifeCycle = keyMirror({
- /**
- * Mounted components have a DOM node representation and are capable of
- * receiving new props.
- */
- MOUNTED: null,
- /**
- * Unmounted components are inactive and cannot receive new props.
- */
- UNMOUNTED: null
-});
-
 var injected = false;
 
 /**
@@ -115,11 +100,6 @@ var ReactComponent = {
  }
  },
 
- /**
- * @internal
- */
- LifeCycle: ComponentLifeCycle,
-
  /**
  * Injected module that provides ability to mutate individual properties.
  * Injected into the base class because many different subclasses need access
@@ -137,17 +117,6 @@ var ReactComponent = {
  */
  Mixin: {
 
- /**
- * Checks whether or not this component is mounted.
- *
- * @return {boolean} True if mounted, false otherwise.
- * @final
- * @protected
- */
- isMounted: function() {
- return this._lifeCycleState === ComponentLifeCycle.MOUNTED;
- },
-
  /**
  * Sets a subset of the props.
  *
@@ -175,10 +144,6 @@ var ReactComponent = {
  * @public
  */
  replaceProps: function(props, callback) {
- invariant(
- this.isMounted(),
- 'replaceProps(...): Can only update a mounted component.'
- );
  invariant(
  this._mountDepth === 0,
  'replaceProps(...): You called `setProps` or `replaceProps` on a ' +
@@ -225,15 +190,6 @@ var ReactComponent = {
  * @internal
  */
  construct: function(element) {
- // Record the component responsible for creating this component.
- // This is accessible through the element but we maintain an extra
- // field for compatibility with devtools and as a way to make an
- // incremental update. TODO: Consider deprecating this field.
- this._owner = element._owner;
-
- // All components start unmounted.
- this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
-
  // See ReactUpdates.
  this._pendingCallbacks = null;
 
@@ -258,20 +214,12 @@ var ReactComponent = {
  * @internal
  */
  mountComponent: function(rootID, transaction, mountDepth) {
- invariant(
- !this.isMounted(),
- 'mountComponent(%s, ...): Can only mount an unmounted component. ' +
- 'Make sure to avoid storing components between renders or reusing a ' +
- 'single component instance in multiple places.',
- rootID
- );
  var ref = this._currentElement.ref;
  if (ref != null) {
  var owner = this._currentElement._owner;
  attachRef(ref, this, owner);
  }
  this._rootNodeID = rootID;
- this._lifeCycleState = ComponentLifeCycle.MOUNTED;
  this._mountDepth = mountDepth;
  // Effectively: return '';
  },
@@ -287,17 +235,15 @@ var ReactComponent = {
  * @internal
  */
  unmountComponent: function() {
- invariant(
- this.isMounted(),
- 'unmountComponent(): Can only unmount a mounted component.'
- );
  var ref = this._currentElement.ref;
  if (ref != null) {
- detachRef(ref, this, this._owner);
+ detachRef(ref, this, this._currentElement._owner);
  }
  unmountIDFromEnvironment(this._rootNodeID);
+ // Reset all fields
  this._rootNodeID = null;
- this._lifeCycleState = ComponentLifeCycle.UNMOUNTED;
+ this._pendingCallbacks = null;
+ this._pendingElement = null;
  },
 
  /**
@@ -312,10 +258,6 @@ var ReactComponent = {
  * @internal
  */
  receiveComponent: function(nextElement, transaction) {
- invariant(
- this.isMounted(),
- 'receiveComponent(...): Can only update a mounted component.'
- );
  this._pendingElement = nextElement;
  this.performUpdateIfNecessary(transaction);
  },
@@ -333,7 +275,6 @@ var ReactComponent = {
  var prevElement = this._currentElement;
  var nextElement = this._pendingElement;
  this._currentElement = nextElement;
- this._owner = nextElement._owner;
  this._pendingElement = null;
  this.updateComponent(transaction, prevElement, nextElement);
  },

src/core/ReactCompositeComponent.js

@@ -28,7 +28,7 @@ var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
 var warning = require('warning');
 
 function getDeclarationErrorAddendum(component) {
- var owner = component._owner || null;
+ var owner = component._currentElement._owner || null;
  if (owner) {
  var constructor = owner._instance.constructor;
  if (constructor && constructor.displayName) {
@@ -56,8 +56,8 @@ function validateLifeCycleOnReplaceState(instance) {
  * `ReactCompositeComponent` maintains an auxiliary life cycle state in
  * `this._compositeLifeCycleState` (which can be null).
  *
- * This is different from the life cycle state maintained by `ReactComponent` in
- * `this._lifeCycleState`. The following diagram shows how the states overlap in
+ * This is different from the life cycle state maintained by `ReactComponent`.
+ * The following diagram shows how the states overlap in
  * time. There are times when the CompositeLifeCycle is null - at those times it
  * is only meaningful to look at ComponentLifeCycle alone.
  *
@@ -129,8 +129,7 @@ var ReactCompositeComponentMixin = assign({},
  * @final
  */
  isMounted: function() {
- return ReactComponent.Mixin.isMounted.call(this) &&
- this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
+ return this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING;
  },
 
  /**
@@ -232,6 +231,9 @@ var ReactCompositeComponentMixin = assign({},
  this._renderedComponent.unmountComponent();
  this._renderedComponent = null;
 
+ // Reset pending fields
+ this._pendingState = null;
+ this._pendingForceUpdate = false;
  ReactComponent.Mixin.unmountComponent.call(this);
 
  // Delete the reference from the instance to this internal representation
@@ -554,11 +556,6 @@ var ReactCompositeComponentMixin = assign({},
  inst.props = nextProps;
  inst.state = nextState;
  inst.context = nextContext;
-
- // Owner cannot change because shouldUpdateReactComponent doesn't allow
- // it. TODO: Remove this._owner completely.
- this._owner = nextParentElement._owner;
-
  return;
  }
 
@@ -606,10 +603,6 @@ var ReactCompositeComponentMixin = assign({},
  inst.state = nextState;
  inst.context = nextContext;
 
- // Owner cannot change because shouldUpdateReactComponent doesn't allow
- // it. TODO: Remove this._owner completely.
- this._owner = nextElement._owner;
-
  this._updateRenderedComponent(transaction);
 
  if (inst.componentDidUpdate) {

src/core/ReactUpdates.js

@@ -136,24 +136,23 @@ function runBatchedUpdates(transaction) {
  dirtyComponents.sort(mountDepthComparator);
 
  for (var i = 0; i < len; i++) {
- // If a component is unmounted before pending changes apply, ignore them
- // TODO: Queue unmounts in the same list to avoid this happening at all
+ // If a component is unmounted before pending changes apply, it will still
+ // be here, but we assume that it has cleared its _pendingCallbacks and
+ // that performUpdateIfNecessary is a noop.
  var component = dirtyComponents[i];
- if (component.isMounted()) {
- // If performUpdateIfNecessary happens to enqueue any new updates, we
- // shouldn't execute the callbacks until the next render happens, so
- // stash the callbacks first
- var callbacks = component._pendingCallbacks;
- component._pendingCallbacks = null;
- component.performUpdateIfNecessary(transaction.reconcileTransaction);
-
- if (callbacks) {
- for (var j = 0; j < callbacks.length; j++) {
- transaction.callbackQueue.enqueue(
- callbacks[j],
- component
- );
- }
+ // If performUpdateIfNecessary happens to enqueue any new updates, we
+ // shouldn't execute the callbacks until the next render happens, so
+ // stash the callbacks first
+ var callbacks = component._pendingCallbacks;
+ component._pendingCallbacks = null;
+ component.performUpdateIfNecessary(transaction.reconcileTransaction);
+
+ if (callbacks) {
+ for (var j = 0; j < callbacks.length; j++) {
+ transaction.callbackQueue.enqueue(
+ callbacks[j],
+ component
+ );
  }
  }
  }

src/core/__tests__/ReactComponentLifeCycle-test.js

@@ -11,12 +11,13 @@
 
 "use strict";
 
+var keyMirror = require('keyMirror');
+
 var React;
 var ReactTestUtils;
 var ReactComponent;
 var ReactCompositeComponent;
 var ReactInstanceMap;
-var ComponentLifeCycle;
 var CompositeComponentLifeCycle;
 
 var getCompositeLifeCycle;
@@ -69,6 +70,21 @@ var POST_WILL_UNMOUNT_STATE = {
  hasWillUnmountCompleted: true
 };
 
+/**
+ * Every React component is in one of these life cycles.
+ */
+var ComponentLifeCycle = keyMirror({
+ /**
+ * Mounted components have a DOM node representation and are capable of
+ * receiving new props.
+ */
+ MOUNTED: null,
+ /**
+ * Unmounted components are inactive and cannot receive new props.
+ */
+ UNMOUNTED: null
+});
+
 /**
  * TODO: We should make any setState calls fail in
  * `getInitialState` and `componentWillMount`. They will usually fail
@@ -83,7 +99,6 @@ describe('ReactComponentLifeCycle', function() {
  ReactTestUtils = require('ReactTestUtils');
  ReactComponent = require('ReactComponent');
  ReactCompositeComponent = require('ReactCompositeComponent');
- ComponentLifeCycle = ReactComponent.LifeCycle;
  CompositeComponentLifeCycle = ReactCompositeComponent.LifeCycle;
 
  ReactInstanceMap = require('ReactInstanceMap');
@@ -94,13 +109,11 @@ describe('ReactComponentLifeCycle', function() {
 
  getLifeCycleState = function(instance) {
  var internalInstance = ReactInstanceMap.get(instance);
- if (!internalInstance) {
- // Once a component is fully unmounted, we cannot actually get to the
- // internal instance. It's already dereferenced and possibly GC:ed.
- // So the unmounted life cycle hook doesn't exist anymore.
- return ComponentLifeCycle.UNMOUNTED;
- }
- return internalInstance._lifeCycleState;
+ // Once a component gets mounted, it has an internal instance, once it
+ // gets unmounted, it loses that internal instance.
+ return internalInstance ?
+ ComponentLifeCycle.MOUNTED :
+ ComponentLifeCycle.UNMOUNTED;
  };
  });
 

src/core/__tests__/ReactUpdates-test.js

@@ -815,4 +815,46 @@ describe('ReactUpdates', function() {
  'asap-1.2'
  ]);
  });
+
+ it('does not call render after a component as been deleted', function() {
+
+ var renderCount = 0;
+ var componentB = null;
+
+ var B = React.createClass({
+ getInitialState: function() {
+ return { updates: 0 };
+ },
+ componentDidMount: function() {
+ componentB = this;
+ },
+ render: function() {
+ renderCount++;
+ return <div />;
+ }
+ });
+
+ var A = React.createClass({
+ getInitialState: function() {
+ return { showB: true };
+ },
+ render: function() {
+ return this.state.showB ? <B /> : <div />;
+ }
+ });
+
+ var container = document.createElement('div');
+
+ var component = React.render(<A />, container);
+
+ ReactUpdates.batchedUpdates(function() {
+ // B will have scheduled an update but the batching should ensure that its
+ // update never fires.
+ componentB.setState({ updates: 1 });
+ component.setState({ showB: false });
+ });
+
+ expect(renderCount).toBe(1);
+ });
+
 });

src/test/ReactDefaultPerf.js

@@ -244,7 +244,8 @@ var ReactDefaultPerf = {
 
  entry.displayNames[rootNodeID] = {
  current: this.constructor.displayName,
- owner: this._owner ? this._owner.constructor.displayName : '<root>'
+ owner: this._currentElement._owner ?
+ this._currentElement._owner.constructor.displayName : '<root>'
  };
 
  return rv;