ComponentWillUnmount should only ever be invoked once (#6613)

facebook · Apr 26, 2016 · 8dfdac6 · 8dfdac6
1 parent 76a4c46
commit 8dfdac6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/renderers/shared/reconciler/ReactCompositeComponent.js b/src/renderers/shared/reconciler/ReactCompositeComponent.js
@@ -132,6 +132,9 @@ var ReactCompositeComponentMixin = {
 
     // See ReactUpdates and ReactUpdateQueue.
     this._pendingCallbacks = null;
+
+    // ComponentWillUnmount shall only be called once
+    this._calledComponentWillUnmount = false;
   },
 
   /**
@@ -416,7 +419,8 @@ var ReactCompositeComponentMixin = {
     }
     var inst = this._instance;
 
-    if (inst.componentWillUnmount) {
+    if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {
+      inst._calledComponentWillUnmount = true;
       if (safely) {
         var name = this.getName() + '.componentWillUnmount()';
         ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));

diff --git a/src/renderers/shared/reconciler/__tests__/ReactCompositeComponent-test.js b/src/renderers/shared/reconciler/__tests__/ReactCompositeComponent-test.js
@@ -1303,4 +1303,45 @@ describe('ReactCompositeComponent', function() {
 
   });
 
+  it('should only call componentWillUnmount once', function() {
+    var app;
+    var count = 0;
+
+    class App extends React.Component {
+      render() {
+        if (this.props.stage === 1) {
+          return <UnunmountableComponent />;
+        } else {
+          return null;
+        }
+      }
+    }
+
+    class UnunmountableComponent extends React.Component {
+      componentWillUnmount() {
+        app.setState({});
+        count++;
+        throw Error('always fails');
+      }
+
+      render() {
+        return <div>Hello {this.props.name}</div>;
+      }
+    }
+
+    var container = document.createElement('div');
+
+    var setRef = (ref) => {
+      if (ref) {
+        app = ref;
+      }
+    };
+
+    expect(function() {
+      ReactDOM.render(<App ref={setRef} stage={1} />, container);
+      ReactDOM.render(<App ref={setRef} stage={2} />, container);
+    }).toThrow();
+    expect(count).toBe(1);
+  });
+
 });