{"files":[{"path":"examples\/fiber\/index.html","status":"M"},{"path":"src\/renderers\/noop\/ReactNoop.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiber.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js","status":"M"}],"patch":"diff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nindex 44df6da417..c965d2f781 100644\n--- a\/examples\/fiber\/index.html\n+++ b\/examples\/fiber\/index.html\n@@ -115,14 +115,12 @@\n SierpinskiTriangle.shouldComponentUpdate = function(oldProps, newProps) {\n var o = oldProps;\n var n = newProps;\n- const res = !(\n+ return !(\n o.x === n.x &&\n o.y === n.y &&\n o.s === n.s &&\n o.children === n.children\n );\n- \/\/ console.log('shouldComponentUpdate', res);\n- return res;\n };\n \n class ExampleApplication extends React.Component {\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 8804b14f3e..946be9f3b4 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -286,23 +286,18 @@ var ReactNoop = {\n log(\n ' '.repeat(depth + 1) + 'QUEUED UPDATES'\n );\n- let firstPendingUpdate;\n- if (updateQueue.lastProgressedUpdate) {\n- firstPendingUpdate = updateQueue.lastProgressedUpdate.next;\n- } else {\n- firstPendingUpdate = updateQueue.first;\n- }\n- if (!firstPendingUpdate) {\n+ const firstUpdate = updateQueue.first;\n+ if (!firstUpdate) {\n return;\n }\n \n log(\n ' '.repeat(depth + 1) + '~',\n- firstPendingUpdate && firstPendingUpdate.partialState,\n- firstPendingUpdate.callback ? 'with callback' : ''\n+ firstUpdate && firstUpdate.partialState,\n+ firstUpdate.callback ? 'with callback' : ''\n );\n var next;\n- while (next = firstPendingUpdate.next) {\n+ while (next = firstUpdate.next) {\n log(\n ' '.repeat(depth + 1) + '~',\n next.partialState,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 5145e1a995..3b9a88fa88 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -43,6 +43,10 @@ var {\n NoEffect,\n } = require('ReactTypeOfSideEffect');\n \n+var {\n+ cloneUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n+\n var invariant = require('invariant');\n \n \/\/ A Fiber is work on a Component that needs to be done or was done. There can\n@@ -103,6 +107,8 @@ export type Fiber = {\n \n \/\/ A queue of state updates and callbacks.\n updateQueue: UpdateQueue | null,\n+ \/\/ A list of callbacks that should be called during the next commit.\n+ callbackList: UpdateQueue | null,\n \/\/ The state used to create the output\n memoizedState: any,\n \n@@ -193,6 +199,7 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n pendingProps: null,\n memoizedProps: null,\n updateQueue: null,\n+ callbackList: null,\n memoizedState: null,\n \n effectTag: NoEffect,\n@@ -268,7 +275,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n \/\/ pendingProps is here for symmetry but is unnecessary in practice for now.\n \/\/ TODO: Pass in the new pendingProps as an argument maybe?\n alt.pendingProps = fiber.pendingProps;\n- alt.updateQueue = fiber.updateQueue;\n+ cloneUpdateQueue(alt, fiber);\n alt.pendingWorkPriority = priorityLevel;\n \n alt.memoizedProps = fiber.memoizedProps;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\nindex 35f948231b..92179a0806 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n@@ -19,7 +19,6 @@ var {\n getMaskedContext,\n } = require('ReactFiberContext');\n var {\n- ensureUpdateQueue,\n addUpdate,\n addReplaceUpdate,\n addForceUpdate,\n@@ -46,30 +45,26 @@ module.exports = function(\n isMounted,\n enqueueSetState(instance, partialState) {\n const fiber = ReactInstanceMap.get(instance);\n- const queue = ensureUpdateQueue(fiber);\n const priorityLevel = getPriorityContext();\n- addUpdate(queue, partialState, priorityLevel);\n+ addUpdate(fiber, partialState, priorityLevel);\n scheduleUpdateAtPriority(fiber, priorityLevel);\n },\n enqueueReplaceState(instance, state) {\n const fiber = ReactInstanceMap.get(instance);\n- const queue = ensureUpdateQueue(fiber);\n const priorityLevel = getPriorityContext();\n- addReplaceUpdate(queue, state, priorityLevel);\n+ addReplaceUpdate(fiber, state, priorityLevel);\n scheduleUpdateAtPriority(fiber, priorityLevel);\n },\n enqueueForceUpdate(instance) {\n const fiber = ReactInstanceMap.get(instance);\n- const queue = ensureUpdateQueue(fiber);\n const priorityLevel = getPriorityContext();\n- addForceUpdate(queue, priorityLevel);\n+ addForceUpdate(fiber, priorityLevel);\n scheduleUpdateAtPriority(fiber, priorityLevel);\n },\n enqueueCallback(instance, callback) {\n const fiber = ReactInstanceMap.get(instance);\n- const queue = ensureUpdateQueue(fiber);\n const priorityLevel = getPriorityContext();\n- addCallback(queue, callback, priorityLevel);\n+ addCallback(fiber, callback, priorityLevel);\n scheduleUpdateAtPriority(fiber, priorityLevel);\n },\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 9c1bf2a9f1..879fcf2485 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -25,7 +25,7 @@ var {\n HostPortal,\n CoroutineComponent,\n } = ReactTypeOfWork;\n-var { commitUpdateQueue } = require('ReactFiberUpdateQueue');\n+var { commitCallbacks } = require('ReactFiberUpdateQueue');\n \n var {\n Placement,\n@@ -417,16 +417,17 @@ module.exports = function(\n }\n attachRef(current, finishedWork, instance);\n }\n- if (finishedWork.updateQueue) {\n- commitUpdateQueue(finishedWork, finishedWork.updateQueue, instance);\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\n case HostRoot: {\n- const updateQueue = finishedWork.updateQueue;\n- if (updateQueue) {\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n const instance = finishedWork.child && finishedWork.child.stateNode;\n- commitUpdateQueue(finishedWork, updateQueue, instance);\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex 93e61ce0c1..9c3a05501a 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -173,7 +173,7 @@ module.exports = function(\n case FunctionalComponent:\n workInProgress.memoizedProps = workInProgress.pendingProps;\n return null;\n- case ClassComponent:\n+ case ClassComponent: {\n \/\/ We are leaving this subtree, so pop context if any.\n if (isContextProvider(workInProgress)) {\n popContextProvider();\n@@ -182,11 +182,12 @@ module.exports = function(\n \/\/ merged it and assigned it to the instance. Transfer it from there.\n \/\/ Also need to transfer the props, because pendingProps will be null\n \/\/ in the case of an update.\n- const { state, props } = workInProgress.stateNode;\n- workInProgress.memoizedState = state;\n- workInProgress.memoizedProps = props;\n+ const instance = workInProgress.stateNode;\n+ workInProgress.memoizedState = instance.state;\n+ workInProgress.memoizedProps = instance.props;\n \n return null;\n+ }\n case HostRoot: {\n workInProgress.memoizedProps = workInProgress.pendingProps;\n const fiberRoot = (workInProgress.stateNode : FiberRoot);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 3547470ab0..47f371b5e4 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -24,7 +24,7 @@ var {\n var { createFiberRoot } = require('ReactFiberRoot');\n var ReactFiberScheduler = require('ReactFiberScheduler');\n \n-var { ensureUpdateQueue, addCallback } = require('ReactFiberUpdateQueue');\n+var { addCallback } = require('ReactFiberUpdateQueue');\n \n if (__DEV__) {\n var ReactFiberInstrumentation = require('ReactFiberInstrumentation');\n@@ -123,13 +123,8 @@ module.exports = function(config : HostConfig(config : HostConfig | null,\n priorityLevel : PriorityLevel\n ) : void {\n- const update : Update = {\n+ const update = {\n priorityLevel,\n partialState,\n callback: null,\n@@ -200,16 +228,16 @@ function addUpdate(\n isForced: false,\n next: null,\n };\n- insertUpdateIntoQueue(queue, update);\n+ insertUpdate(fiber, update);\n }\n exports.addUpdate = addUpdate;\n \n function addReplaceUpdate(\n- queue : UpdateQueue,\n+ fiber : Fiber,\n state : any | null,\n priorityLevel : PriorityLevel\n ) : void {\n- const update : Update = {\n+ const update = {\n priorityLevel,\n partialState: state,\n callback: null,\n@@ -217,29 +245,12 @@ function addReplaceUpdate(\n isForced: false,\n next: null,\n };\n- \/\/ Add a pending update to the end of the queue.\n- if (!queue.last) {\n- \/\/ The queue is empty.\n- queue.first = queue.last = update;\n- return;\n- }\n- \/\/ The queue is not empty. Insert the new update into the queue, sorted by\n- \/\/ priority then insertion order. Since this is a replace, drop all pending\n- \/\/ updates with equal priority. We can't drop updates with higher priority,\n- \/\/ because they might be flushed in an earlier commit. We'll drop them during\n- \/\/ the commit phase if necessary.\n- const firstPendingUpdate = getFirstPendingUpdate(queue);\n- if (!firstPendingUpdate && queue.last) {\n- \/\/ This is the first pending update. Add it to the end of the queue.\n- queue.last.next = update;\n- queue.last = update;\n- return;\n- }\n \n- \/\/ Find the last pending update with equal priority.\n- let replaceAfter = queue.lastProgressedUpdate;\n- let replaceBefore = firstPendingUpdate;\n- if (replaceBefore) {\n+ \/\/ Drop all updates with equal priority\n+ let queue = ensureUpdateQueue(fiber);\n+ for (let i = 0; queue && i < 2; i++) {\n+ let replaceAfter = null;\n+ let replaceBefore = queue.first;\n let comparison = Infinity;\n while (replaceBefore &&\n (comparison = comparePriority(replaceBefore.priorityLevel, priorityLevel)) <= 0) {\n@@ -248,26 +259,30 @@ function addReplaceUpdate(\n }\n replaceBefore = replaceBefore.next;\n }\n- }\n \n- if (replaceAfter) {\n- replaceAfter.next = update;\n- } else {\n- \/\/ This is the first item in the queue.\n- queue.first = update;\n- }\n+ if (replaceAfter) {\n+ replaceAfter.next = replaceBefore;\n+ } else {\n+ queue.first = replaceBefore;\n+ }\n \n- if (replaceBefore) {\n- update.next = replaceBefore;\n- } else {\n- \/\/ This is the last item in the queue.\n- queue.last = update;\n+ if (!replaceBefore) {\n+ queue.last = replaceAfter;\n+ }\n+\n+ if (fiber.alternate) {\n+ queue = ensureUpdateQueue(fiber.alternate);\n+ } else {\n+ queue = null;\n+ }\n }\n+\n+ insertUpdate(fiber, update);\n }\n exports.addReplaceUpdate = addReplaceUpdate;\n \n-function addForceUpdate(queue : UpdateQueue, priorityLevel : PriorityLevel) : void {\n- const update : Update = {\n+function addForceUpdate(fiber : Fiber, priorityLevel : PriorityLevel) : void {\n+ const update = {\n priorityLevel,\n partialState: null,\n callback: null,\n@@ -275,23 +290,13 @@ function addForceUpdate(queue : UpdateQueue, priorityLevel : PriorityLevel) : vo\n isForced: true,\n next: null,\n };\n- insertUpdateIntoQueue(queue, update);\n+ insertUpdate(fiber, update);\n }\n exports.addForceUpdate = addForceUpdate;\n \n \n-function addCallback(queue : UpdateQueue, callback: Callback, priorityLevel : PriorityLevel) : void {\n- if (getFirstPendingUpdate(queue) &&\n- queue.last &&\n- (queue.last.priorityLevel === priorityLevel) &&\n- !queue.last.callback) {\n- \/\/ If pending updates already exist, and the last pending update does not\n- \/\/ have a callback, and the priority levels are equal, we can add the\n- \/\/ incoming callback to that update to avoid an extra allocation.\n- queue.last.callback = callback;\n- return;\n- }\n-\n+function addCallback(fiber : Fiber, callback: Callback, priorityLevel : PriorityLevel) : void {\n+ \/\/ TODO: Fast path where last item in queue has equal priority.\n const update : Update = {\n priorityLevel,\n partialState: null,\n@@ -300,13 +305,12 @@ function addCallback(queue : UpdateQueue, callback: Callback, priorityLevel : Pr\n isForced: false,\n next: null,\n };\n- insertUpdateIntoQueue(queue, update);\n+ insertUpdate(fiber, update);\n }\n exports.addCallback = addCallback;\n \n function getPendingPriority(queue : UpdateQueue) : PriorityLevel {\n- const firstPendingUpdate = getFirstPendingUpdate(queue);\n- return firstPendingUpdate ? firstPendingUpdate.priorityLevel : NoWork;\n+ return queue.first ? queue.first.priorityLevel : NoWork;\n }\n exports.getPendingPriority = getPendingPriority;\n \n@@ -329,24 +333,14 @@ function beginUpdateQueue(\n priorityLevel : PriorityLevel\n ) : any {\n \/\/ Applies updates with matching priority to the previous state to create\n- \/\/ a new state object. If an update was used previously but never flushed\n- \/\/ due to a bail out, it's used again regardless of its priority.\n-\n- \/\/ Reset these flags. We'll update them while looping through the queue.\n- workInProgress.effectTag &= ~ForceUpdate;\n- workInProgress.effectTag &= ~CallbackEffect;\n+ \/\/ a new state object.\n \n- const prevLastProgressedUpdate = queue.lastProgressedUpdate;\n let state = prevState;\n let dontMutatePrevState = true;\n let isEmpty = true;\n- let alreadyProgressedUpdate = Boolean(prevLastProgressedUpdate);\n- let lastProgressedUpdate = null;\n- let update : Update | null = queue.first;\n- while (update && (\n- alreadyProgressedUpdate ||\n- comparePriority(update.priorityLevel, priorityLevel) <= 0\n- )) {\n+ let callbackList = null;\n+ let update = queue.first;\n+ while (update && comparePriority(update.priorityLevel, priorityLevel) <= 0) {\n let partialState;\n if (update.isReplace) {\n \/\/ A replace should drop all previous updates in the queue, so\n@@ -370,56 +364,52 @@ function beginUpdateQueue(\n workInProgress.effectTag |= ForceUpdate;\n }\n if (update.callback) {\n+ if (callbackList && callbackList.last) {\n+ callbackList.last.next = update;\n+ callbackList.last = update;\n+ } else {\n+ callbackList = {\n+ first: update,\n+ last: update,\n+ };\n+ }\n workInProgress.effectTag |= CallbackEffect;\n }\n- if (update === prevLastProgressedUpdate) {\n- alreadyProgressedUpdate = false;\n- }\n- lastProgressedUpdate = update;\n update = update.next;\n }\n \n-\n- \/\/ Mark the point in the queue where we stopped applying updates\n- queue.lastProgressedUpdate = lastProgressedUpdate;\n-\n if (isEmpty) {\n- \/\/ None of the updates contained state. Return the original state object.\n- return prevState;\n+ \/\/ None of the updates contained state. Use the original state object.\n+ state = prevState;\n+ }\n+\n+ if (update) {\n+ queue.first = update;\n+ } else {\n+ \/\/ Queue is now empty\n+ workInProgress.updateQueue = null;\n }\n \n+ workInProgress.callbackList = callbackList;\n+ workInProgress.memoizedState = state;\n+\n return state;\n }\n exports.beginUpdateQueue = beginUpdateQueue;\n \n-function commitUpdateQueue(finishedWork : Fiber, queue : UpdateQueue, context : mixed) {\n-\n- if (finishedWork.effectTag & CallbackEffect) {\n- \/\/ Call the callbacks on all the non-pending updates.\n- let update = getFirstProgressedUpdate(queue);\n- while (update && update !== getFirstPendingUpdate(queue)) {\n- const callback = update.callback;\n- if (typeof callback === 'function') {\n- callback.call(context);\n- }\n- update = update.next;\n+function commitCallbacks(finishedWork : Fiber, callbackList : UpdateQueue, context : mixed) {\n+ const stopAfter = callbackList.last;\n+ let update = callbackList.first;\n+ while (update) {\n+ const callback = update.callback;\n+ if (typeof callback === 'function') {\n+ callback.call(context);\n }\n- }\n-\n- \/\/ Drop all comitted updates, leaving only the pending updates.\n- queue.first = getFirstPendingUpdate(queue);\n- queue.lastProgressedUpdate = null;\n- if (!queue.first) {\n- queue.last = queue.lastProgressedUpdate = null;\n-\n- \/\/ If the list is now empty, we can remove it from the finished work\n- finishedWork.updateQueue = null;\n- if (finishedWork.alternate) {\n- \/\/ Normally we don't mutate the current tree, but we do for updates.\n- \/\/ The queue on the work in progress is always the same as the queue\n- \/\/ on the current.\n- finishedWork.alternate.updateQueue = null;\n+ if (update === stopAfter) {\n+ break;\n }\n+ update = update.next;\n }\n+ finishedWork.callbackList = null;\n }\n-exports.commitUpdateQueue = commitUpdateQueue;\n+exports.commitCallbacks = commitCallbacks;\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\nindex 7dbf05ad52..857a0f7e60 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n@@ -211,7 +211,7 @@ describe('ReactIncrementalUpdates', () => {\n \/\/ Because e is a replaceState, d gets dropped.\n ReactNoop.flush();\n expect(ReactNoop.getChildren()).toEqual([span('efg')]);\n- \/\/ Ensure that update d is not progressed before being replaced.\n+ \/\/ Ensure that updater function d is never called.\n expect(progressedUpdates).toEqual(['e', 'f', 'g']);\n });\n \n","parents":["ead8ab7e2d2a5d318c580675503de761a49745cb"],"commit":{"authorName":"Andrew Clark","authorEmail":"acdlite@fb.com","shortRevision":"d7f89b8681","subject":"Don't rely on commit phase effect to clear updates","revision":"d7f89b86818c267083e9841a830031438e0d0185","authoredAt":"2016-12-12T23:53:14-08:00"},"body":"Instead clear updates on the work-in-progress during the begin phase.\nAborted updates are recovered by cloning from the current fiber."}

dillon1000/react

Files changed