Update callbacks

Callbacks are stored on the same queue as updates. They care called
during the commit phase, after the updates have been flushed.

Because the update queue is cleared during the completion phase (before
commit), a new field has been added to fiber called callbackList. The
queue is transferred from updateQueue to callbackList during completion.
During commit, the list is reset.

Need a test to confirm that callbacks are not lost if an update is
preempted.

Author: acdlite

src/renderers/shared/fiber/ReactFiber.js

@@ -83,6 +83,8 @@ export type Fiber = Instance & {
   updateQueue: ?UpdateQueue,
   // The state used to create the output. This is a full state object.
   memoizedState: any,
+  // Linked list of callbacks to call after updates are committed.
+  callbackList: ?UpdateQueue,
   // Output is the return value of this fiber, or a linked list of return values
   // if this returns multiple values. Such as a fragment.
   output: any, // This type will be more specific once we overload the tag.
@@ -141,6 +143,7 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {
     memoizedProps: null,
     updateQueue: null,
     memoizedState: null,
+    callbackList: null,
     output: null,
 
     nextEffect: null,
@@ -176,6 +179,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi
     alt.ref = alt.ref;
     alt.pendingProps = fiber.pendingProps;
     alt.updateQueue = fiber.updateQueue;
+    alt.callbackList = fiber.callbackList;
     alt.pendingWorkPriority = priorityLevel;
 
     // Whenever we clone, we do so to get a new work in progress.
@@ -198,6 +202,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi
   // pendingProps is here for symmetry but is unnecessary in practice for now.
   alt.pendingProps = fiber.pendingProps;
   alt.updateQueue = fiber.updateQueue;
+  alt.callbackList = fiber.callbackList;
   alt.pendingWorkPriority = priorityLevel;
 
   alt.alternate = fiber;

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -44,6 +44,8 @@ var { findNextUnitOfWorkAtPriority } = require('ReactFiberPendingWork');
 var {
   createUpdateQueue,
   addToQueue,
+  addCallbackToQueue,
+  concatQueues,
   mergeUpdateQueue,
 } = require('ReactFiberUpdateQueue');
 var ReactInstanceMap = require('ReactInstanceMap');
@@ -132,6 +134,29 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>, getSchedu
         createUpdateQueue(partialState);
       scheduleUpdate(fiber, updateQueue, LowPriority);
     },
+    enqueueCallback(instance, callback) {
+      const fiber = ReactInstanceMap.get(instance);
+      let updateQueue = fiber.updateQueue ?
+        fiber.updateQueue :
+        createUpdateQueue(null);
+      addCallbackToQueue(updateQueue, callback);
+
+      if (fiber.callbackList) {
+        // If this fiber was preempted and already has callbacks queued up,
+        // we need to make sure they are part of the new update queue
+        updateQueue = concatQueues(fiber.callbackList, updateQueue);
+        // Safe to reset this now
+        fiber.callbackList = null;
+        if (fiber.alternate) {
+          fiber.alternate.callbackList = null;
+        }
+      }
+
+      fiber.updateQueue = updateQueue;
+      if (fiber.alternate) {
+        fiber.alternate.updateQueue = updateQueue;
+      }
+    },
   };
 
   function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -22,6 +22,7 @@ var {
   HostContainer,
   HostComponent,
 } = ReactTypeOfWork;
+var { callCallbacks } = require('ReactFiberUpdateQueue');
 
 module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
 
@@ -31,6 +32,13 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
   function commitWork(finishedWork : Fiber) : void {
     switch (finishedWork.tag) {
       case ClassComponent: {
+        if (finishedWork.callbackList) {
+          callCallbacks(finishedWork.callbackList);
+          finishedWork.callbackList = null;
+          if (finishedWork.alternate) {
+            finishedWork.alternate.callbackList = null;
+          }
+        }
         // TODO: Fire componentDidMount/componentDidUpdate, update refs
         return;
       }

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -46,7 +46,6 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
     }
   }
 
-  /*
   // TODO: It's possible this will create layout thrash issues because mutations
   // of the DOM and life-cycles are interleaved. E.g. if a componentDidMount
   // of a sibling reads, then the next sibling updates and reads etc.
@@ -59,7 +58,6 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
     }
     workInProgress.lastEffect = workInProgress;
   }
-  */
 
   function transferOutput(child : ?Fiber, returnFiber : Fiber) {
     // If we have a single result, we just pass that through as the output to
@@ -133,9 +131,16 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
       case ClassComponent:
         transferOutput(workInProgress.child, workInProgress);
         // Don't use the state queue to compute the memoized state. We already
-        // merged it and assigned it to the instance. Copy it from there.
+        // merged it and assigned it to the instance. Transfer it from there.
         const state = workInProgress.stateNode.state;
         workInProgress.memoizedState = state;
+        // Transfer update queue to callbackList field so callbacks can be
+        // called during commit phase.
+        workInProgress.callbackList = workInProgress.updateQueue;
+        if (current) {
+          current.callbackList = workInProgress.callbackList;
+        }
+        markForPostEffect(workInProgress);
         return null;
       case HostContainer:
         transferOutput(workInProgress.child, workInProgress);

src/renderers/shared/fiber/ReactFiberUpdateQueue.js

@@ -15,6 +15,7 @@
 type UpdateQueueNode = {
   partialState: any,
   callback: ?Function,
+  callbackWasCalled: boolean,
   next: ?UpdateQueueNode,
 };
 
@@ -26,6 +27,7 @@ exports.createUpdateQueue = function(partialState : mixed) : UpdateQueue {
   const queue = {
     partialState,
     callback: null,
+    callbackWasCalled: false,
     next: null,
     tail: (null : any),
   };
@@ -37,19 +39,29 @@ exports.addToQueue = function(queue : UpdateQueue, partialState : mixed) : Updat
   const node = {
     partialState,
     callback: null,
+    callbackWasCalled: false,
     next: null,
   };
   queue.tail.next = node;
   queue.tail = node;
   return queue;
 };
 
-exports.callCallbacks = function(queue : UpdateQueue, partialState : mixed) {
+exports.addCallbackToQueue = function(queue : UpdateQueue, callback: Function) : UpdateQueue {
+  if (queue.tail.callback) {
+    // If the tail already as a callback, add an empty node to queue
+    exports.addToQueue(queue, null);
+  }
+  queue.tail.callback = callback;
+  return queue;
+};
+
+exports.callCallbacks = function(queue : UpdateQueue, context : any) {
   let node : ?UpdateQueueNode = queue;
   while (node) {
-    if (node.callback) {
-      const { callback } = node;
-      callback();
+    if (node.callback && !node.callbackWasCalled) {
+      node.callbackWasCalled = true;
+      node.callback.call(context);
     }
     node = node.next;
   }
@@ -71,3 +83,9 @@ exports.mergeUpdateQueue = function(queue : UpdateQueue, prevState : any, props
   }
   return state;
 };
+
+exports.concatQueues = function(a: UpdateQueue, b: UpdateQueue): UpdateQueue {
+  a.tail.next = b;
+  a.tail = b;
+  return a;
+}

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

@@ -274,4 +274,34 @@ describe('ReactIncrementalSideEffects', function() {
   // moves to "current" without flushing due to having lower priority. Does this
   // even happen? Maybe a child doesn't get processed because it is lower prio?
 
+  it('calls callback after update is flushed', () => {
+    let instance;
+    class Foo extends React.Component {
+      constructor() {
+        super();
+        instance = this;
+        this.state = { text: 'foo' };
+      }
+      render() {
+        return <span prop={this.state.text} />;
+      }
+    }
+
+    ReactNoop.render(<Foo />);
+    ReactNoop.flush();
+    expect(ReactNoop.root.children).toEqual([
+      span('foo'),
+    ]);
+    let called = false;
+    instance.setState({ text: 'bar' }, () => {
+      expect(ReactNoop.root.children).toEqual([
+        span('bar'),
+      ]);
+      called = true;
+    });
+    ReactNoop.flush();
+    expect(called).toBe(true);
+  });
+
+  // TODO: Test that callbacks are not lost if an update is preempted.
 });