Fire componentDidMount/componentDidUpdate life-cycles

These happen in the commit phase *before* the setState callback.

Unfortunately, we've lost the previous state at this point since
we've already mutated the instance. This needs to be fixed
somehow.

Author: sebmarkbage

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -213,6 +213,20 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
   function commitWork(current : ?Fiber, finishedWork : Fiber) : void {
     switch (finishedWork.tag) {
       case ClassComponent: {
+        const instance = finishedWork.stateNode;
+        if (!current) {
+          if (typeof instance.componentDidMount === 'function') {
+            instance.componentDidMount();
+          }
+        } else {
+          if (typeof instance.componentDidUpdate === 'function') {
+            const prevProps = current.memoizedProps;
+            // TODO: This is the new state. We don't currently have the previous
+            // state anymore.
+            const prevState = instance.state || null;
+            instance.componentDidUpdate(prevProps, prevState);
+          }
+        }
         // Clear updates from current fiber. This must go before the callbacks
         // are reset, in case an update is triggered from inside a callback. Is
         // this safe? Relies on the assumption that work is only committed if
@@ -225,7 +239,7 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
           finishedWork.callbackList = null;
           callCallbacks(callbackList, finishedWork.stateNode);
         }
-        // TODO: Fire componentDidMount/componentDidUpdate, update refs
+        // TODO: Fire update refs
         return;
       }
       case HostContainer: {

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -116,6 +116,9 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
     let effectfulFiber = finishedWork.firstEffect;
     while (effectfulFiber) {
       switch (effectfulFiber.effectTag) {
+        // TODO: Should we commit host updates here? Otherwise update to parent
+        // host components are not visible in life-cycles. Such as when you read
+        // layout information.
         case Placement:
         case PlacementAndUpdate:
           commitInsertion(effectfulFiber);

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

@@ -557,7 +557,87 @@ describe('ReactIncrementalSideEffects', () => {
 
   });
 
-  // TODO: Test that unmounts and deletions happen in the expected way for
-  // aborted and resumed render life-cycles.
+  it('calls componentDidMount/Update after insertion/update', () => {
+
+    var ops = [];
+
+    class Bar extends React.Component {
+      componentDidMount() {
+        ops.push('mount:' + this.props.name);
+      }
+      componentDidUpdate() {
+        ops.push('update:' + this.props.name);
+      }
+      render() {
+        return <span />;
+      }
+    }
+
+    class Wrapper extends React.Component {
+      componentDidMount() {
+        ops.push('mount:wrapper-' + this.props.name);
+      }
+      componentDidUpdate() {
+        ops.push('update:wrapper-' + this.props.name);
+      }
+      render() {
+        return <Bar name={this.props.name} />;
+      }
+    }
+
+    function Foo(props) {
+      return (
+        <div>
+          <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>
+            <Bar key="g" name="G" />
+          </div>
+        </div>
+      );
+    }
+
+    ReactNoop.render(<Foo />);
+    ReactNoop.flush();
+    expect(ops).toEqual([
+      'mount:A',
+      'mount:B',
+      'mount:wrapper-B',
+      'mount:C',
+      'mount:D',
+      'mount:wrapper-D',
+      'mount:E',
+      'mount:F',
+      'mount:G',
+    ]);
+
+    ops = [];
+
+    ReactNoop.render(<Foo />);
+    ReactNoop.flush();
+    expect(ops).toEqual([
+      'update:A',
+      'update:B',
+      'update:wrapper-B',
+      'update:C',
+      'update:D',
+      'update:wrapper-D',
+      'update:E',
+      'update:F',
+      'update:G',
+    ]);
+
+  });
+
+  // TODO: Test that mounts, updates, refs, unmounts and deletions happen in the
+  // expected way for aborted and resumed render life-cycles.
 
 });