Call componentWillUnmount during deletion phase

While we're deleting nodes, we need to call the unmount
life-cycle. However, there is a special case that we don't want
to keep deleting every host node along the way since deleting the
top node is enough.

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -132,8 +132,36 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
     }
   }
 
+  function commitNestedUnmounts(root : Fiber) {
+    // While we're inside a removed host node we don't want to call
+    // removeChild on the inner nodes because they're removed by the top
+    // call anyway. We also want to call componentWillUnmount on all
+    // composites before this host node is removed from the tree. Therefore
+    // we do an inner loop while we're still inside the host node.
+    let node : Fiber = root;
+    while (true) {
+      commitUnmount(node);
+      if (node.child) {
+        // TODO: Coroutines need to visit the stateNode.
+        node = node.child;
+        continue;
+      }
+      if (node === root) {
+        return;
+      }
+      while (!node.sibling) {
+        if (!node.return || node.return === root) {
+          return;
+        }
+        node = node.return;
+      }
+      node = node.sibling;
+    }
+  }
+
   function commitDeletion(current : Fiber) : void {
     // Recursively delete all host nodes from the parent.
+    // TODO: Error handling.
     const parent = getHostParent(current);
     if (!parent) {
       return;
@@ -146,11 +174,17 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
     let node : Fiber = current;
     while (true) {
       if (node.tag === HostComponent || node.tag === HostText) {
+        commitNestedUnmounts(node);
+        // After all the children have unmounted, it is now safe to remove the
+        // node from the tree.
         removeChild(parent, node.stateNode);
-      } else if (node.child) {
-        // TODO: Coroutines need to visit the stateNode.
-        node = node.child;
-        continue;
+      } else {
+        commitUnmount(node);
+        if (node.child) {
+          // TODO: Coroutines need to visit the stateNode.
+          node = node.child;
+          continue;
+        }
       }
       if (node === current) {
         return;
@@ -165,6 +199,17 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
     }
   }
 
+  function commitUnmount(current : Fiber) : void {
+    switch (current.tag) {
+      case ClassComponent: {
+        const instance = current.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          instance.componentWillUnmount();
+        }
+      }
+    }
+  }
+
   function commitWork(current : ?Fiber, finishedWork : Fiber) : void {
     switch (finishedWork.tag) {
       case ClassComponent: {

src/renderers/shared/fiber/__tests__/ReactIncrementalSideEffects-test.js

@@ -132,6 +132,38 @@ describe('ReactIncrementalSideEffects', () => {
 
   });
 
+  it('can deletes children either components, host or text', function() {
+
+    function Bar(props) {
+      return <span prop={props.children} />;
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.show ? [
+            <div key="a" />,
+            <Bar key="b">Hello</Bar>,
+            'World',
+          ] : []}
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo show={true} />);
+    ReactNoop.flush();
+    expect(ReactNoop.root.children).toEqual([
+      div(div(), span('Hello'), 'World'),
+    ]);
+
+    ReactNoop.render(<Foo show={false} />);
+    ReactNoop.flush();
+    expect(ReactNoop.root.children).toEqual([
+      div(),
+    ]);
+
+  });
+
   it('does not update child nodes if a flush is aborted', () => {
 
     function Bar(props) {
@@ -459,4 +491,73 @@ describe('ReactIncrementalSideEffects', () => {
   });
 
   // TODO: Test that callbacks are not lost if an update is preempted.
+
+  it('calls componentWillUnmount after a deletion, even if nested', () => {
+
+    var ops = [];
+
+    class Bar extends React.Component {
+      componentWillUnmount() {
+        ops.push(this.props.name);
+      }
+      render() {
+        return <span />;
+      }
+    }
+
+    class Wrapper extends React.Component {
+      componentWillUnmount() {
+        ops.push('Wrapper');
+      }
+      render() {
+        return <Bar name={this.props.name} />;
+      }
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          {props.show ? [
+            <Bar key="a" name="A" />,
+            <Wrapper key="b" name="B" />,
+            <div key="cd">
+              <Bar name="C" />
+              <Wrapper name="D" />,
+            </div>,
+            [
+              <Bar key="e" name="E" />,
+              <Bar key="f" name="F" />,
+            ],
+          ] : []}
+          <div>
+            {props.show ? <Bar key="g" name="G" /> : null}
+          </div>
+          <Bar name="this should not unmount" />
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo show={true} />);
+    ReactNoop.flush();
+    expect(ops).toEqual([]);
+
+    ReactNoop.render(<Foo show={false} />);
+    ReactNoop.flush();
+    expect(ops).toEqual([
+      'A',
+      'Wrapper',
+      'B',
+      'C',
+      'Wrapper',
+      'D',
+      'E',
+      'F',
+      'G',
+    ]);
+
+  });
+
+  // TODO: Test that unmounts and deletions happen in the expected way for
+  // aborted and resumed render life-cycles.
+
 });