{"body":"[Fiber] Refactor Pending Work Phase and Progressed Work","files":[{"status":"M","path":"src\/renderers\/noop\/ReactNoop.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactChildFiber.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiber.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js"},{"status":"D","path":"src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js"}],"parents":["a64ca9b697d0808a2966465fea2e658e4f310080","52011d58b0f631396973c2cd3a53be3fa5a6add3"],"patch":"diff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 82e64b5357..390c4f6ac3 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -170,16 +170,12 @@ var ReactNoop = {\n ' '.repeat(depth) + '- ' + (fiber.type ? fiber.type.name || fiber.type : '[root]'),\n '[' + fiber.pendingWorkPriority + (fiber.pendingProps ? '*' : '') + ']'\n );\n- const childInProgress = fiber.childInProgress;\n- if (childInProgress) {\n- if (childInProgress === fiber.child) {\n- console.log(' '.repeat(depth + 1) + 'ERROR: IN PROGRESS == CURRENT');\n- } else {\n- console.log(' '.repeat(depth + 1) + 'IN PROGRESS');\n- logFiber(childInProgress, depth + 1);\n- if (fiber.child) {\n- console.log(' '.repeat(depth + 1) + 'CURRENT');\n- }\n+ const childInProgress = fiber.progressedChild;\n+ if (childInProgress && childInProgress !== fiber.child) {\n+ console.log(' '.repeat(depth + 1) + 'IN PROGRESS: ' + fiber.progressedPriority);\n+ logFiber(childInProgress, depth + 1);\n+ if (fiber.child) {\n+ console.log(' '.repeat(depth + 1) + 'CURRENT');\n }\n }\n if (fiber.child) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\nindex 90ea04d095..93839caed5 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n@@ -63,10 +63,10 @@ function ChildReconciler(shouldClone) {\n \/\/ Will fix reconciliation properly later.\n const clone = shouldClone ? cloneFiber(existingChild, priority) : existingChild;\n if (!shouldClone) {\n+ \/\/ TODO: This might be lowering the priority of nested unfinished work.\n clone.pendingWorkPriority = priority;\n }\n clone.pendingProps = element.props;\n- clone.child = existingChild.child;\n clone.sibling = null;\n clone.return = returnFiber;\n previousSibling.sibling = clone;\n@@ -134,10 +134,10 @@ function ChildReconciler(shouldClone) {\n \/\/ Get the clone of the existing fiber.\n const clone = shouldClone ? cloneFiber(existingChild, priority) : existingChild;\n if (!shouldClone) {\n+ \/\/ TODO: This might be lowering the priority of nested unfinished work.\n clone.pendingWorkPriority = priority;\n }\n clone.pendingProps = element.props;\n- clone.child = existingChild.child;\n clone.sibling = null;\n clone.return = returnFiber;\n return clone;\n@@ -219,3 +219,49 @@ function ChildReconciler(shouldClone) {\n exports.reconcileChildFibers = ChildReconciler(true);\n \n exports.reconcileChildFibersInPlace = ChildReconciler(false);\n+\n+\n+function cloneSiblings(current : Fiber, workInProgress : Fiber, returnFiber : Fiber) {\n+ workInProgress.return = returnFiber;\n+ while (current.sibling) {\n+ current = current.sibling;\n+ workInProgress = workInProgress.sibling = cloneFiber(\n+ current,\n+ current.pendingWorkPriority\n+ );\n+ workInProgress.return = returnFiber;\n+ }\n+ workInProgress.sibling = null;\n+}\n+\n+exports.cloneChildFibers = function(current : ?Fiber, workInProgress : Fiber) {\n+ if (!workInProgress.child) {\n+ return;\n+ }\n+ if (current && workInProgress.child === current.child) {\n+ \/\/ We use workInProgress.child since that lets Flow know that it can't be\n+ \/\/ null since we validated that already. However, as the line above suggests\n+ \/\/ they're actually the same thing.\n+ const currentChild = workInProgress.child;\n+ \/\/ TODO: This used to reset the pending priority. Not sure if that is needed.\n+ \/\/ workInProgress.pendingWorkPriority = current.pendingWorkPriority;\n+ \/\/ TODO: The below priority used to be set to NoWork which would've\n+ \/\/ dropped work. This is currently unobservable but will become\n+ \/\/ observable when the first sibling has lower priority work remaining\n+ \/\/ than the next sibling. At that point we should add tests that catches\n+ \/\/ this.\n+ const newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);\n+ workInProgress.child = newChild;\n+ cloneSiblings(currentChild, newChild, workInProgress);\n+ }\n+\n+ \/\/ If there is no alternate, then we don't need to clone the children.\n+ \/\/ If the children of the alternate fiber is a different set, then we don't\n+ \/\/ need to clone. We need to reset the return fiber though since we'll\n+ \/\/ traverse down into them.\n+ let child = workInProgress.child;\n+ while (child) {\n+ child.return = workInProgress;\n+ child = child.sibling;\n+ }\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex fb3d6f9723..967c6f78b0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -89,25 +89,44 @@ export type Fiber = Instance & {\n firstEffect: ?Fiber,\n lastEffect: ?Fiber,\n \n-\n \/\/ This will be used to quickly determine if a subtree has no pending changes.\n pendingWorkPriority: PriorityLevel,\n \n+ \/\/ This value represents the priority level that was last used to process this\n+ \/\/ component. This indicates whether it is better to continue from the\n+ \/\/ progressed work or if it is better to continue from the current state.\n+ progressedPriority: PriorityLevel,\n+\n+ \/\/ If work bails out on a Fiber that already had some work started at a lower\n+ \/\/ priority, then we need to store the progressed work somewhere. This holds\n+ \/\/ the started child set until we need to get back to working on it. It may\n+ \/\/ or may not be the same as the \"current\" child.\n+ progressedChild: ?Fiber,\n+\n \/\/ This is a pooled version of a Fiber. Every fiber that gets updated will\n \/\/ eventually have a pair. There are cases when we can clean up pairs to save\n \/\/ memory if we need to.\n alternate: ?Fiber,\n \n- \/\/ Keeps track of the children that are currently being processed but have not\n- \/\/ yet completed.\n- childInProgress: ?Fiber,\n-\n \/\/ Conceptual aliases\n \/\/ workInProgress : Fiber -> alternate The alternate used for reuse happens\n \/\/ to be the same as work in progress.\n \n };\n \n+\/\/ This is a constructor of a POJO instead of a constructor function for a few\n+\/\/ reasons:\n+\/\/ 1) Nobody should add any instance methods on this. Instance methods can be\n+\/\/ more difficult to predict when they get optimized and they are almost\n+\/\/ never inlined properly in static compilers.\n+\/\/ 2) Nobody should rely on `instanceof Fiber` for type testing. We should\n+\/\/ always know when it is a fiber.\n+\/\/ 3) We can easily go from a createFiber call to calling a constructor if that\n+\/\/ is faster. The opposite is not true.\n+\/\/ 4) We might want to experiment with using numeric keys since they are easier\n+\/\/ to optimize in a non-JIT environment.\n+\/\/ 5) It should be easy to port this to a C struct and keep a C implementation\n+\/\/ compatible.\n var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n return {\n \n@@ -139,8 +158,8 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n lastEffect: null,\n \n pendingWorkPriority: NoWork,\n-\n- childInProgress: null,\n+ progressedPriority: NoWork,\n+ progressedChild: null,\n \n alternate: null,\n \n@@ -152,7 +171,16 @@ function shouldConstruct(Component) {\n }\n \n \/\/ This is used to create an alternate fiber to do work on.\n+\/\/ TODO: Rename to createWorkInProgressFiber or something like that.\n exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fiber {\n+ \/\/ We clone to get a work in progress. That means that this fiber is the\n+ \/\/ current. To make it safe to reuse that fiber later on as work in progress\n+ \/\/ we need to reset its work in progress flag now. We don't have an\n+ \/\/ opportunity to do this earlier since we don't traverse the tree when\n+ \/\/ the work in progress tree becomes the current tree.\n+ \/\/ fiber.progressedPriority = NoWork;\n+ \/\/ fiber.progressedChild = null;\n+\n \/\/ We use a double buffering pooling technique because we know that we'll only\n \/\/ ever need at most two versions of a tree. We pool the \"other\" unused node\n \/\/ that we're free to reuse. This is lazily created to avoid allocating extra\n@@ -161,13 +189,15 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n let alt = fiber.alternate;\n if (alt) {\n alt.stateNode = fiber.stateNode;\n- alt.child = fiber.child;\n- alt.childInProgress = fiber.childInProgress;\n- alt.sibling = fiber.sibling;\n- alt.ref = alt.ref;\n- alt.pendingProps = fiber.pendingProps;\n+ alt.sibling = fiber.sibling; \/\/ This should always be overridden. TODO: null\n+ alt.ref = fiber.ref;\n+ alt.pendingProps = fiber.pendingProps; \/\/ TODO: Pass as argument.\n alt.pendingWorkPriority = priorityLevel;\n \n+ alt.child = fiber.child;\n+ alt.memoizedProps = fiber.memoizedProps;\n+ alt.output = fiber.output;\n+\n \/\/ Whenever we clone, we do so to get a new work in progress.\n \/\/ This ensures that we've reset these in the new tree.\n alt.nextEffect = null;\n@@ -182,13 +212,19 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n alt.type = fiber.type;\n alt.stateNode = fiber.stateNode;\n alt.child = fiber.child;\n- alt.childInProgress = fiber.childInProgress;\n- alt.sibling = fiber.sibling;\n- alt.ref = alt.ref;\n+ alt.sibling = fiber.sibling; \/\/ This should always be overridden. TODO: null\n+ alt.ref = fiber.ref;\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.pendingWorkPriority = priorityLevel;\n \n+ alt.memoizedProps = fiber.memoizedProps;\n+ alt.output = fiber.output;\n+\n+ alt.progressedChild = fiber.progressedChild;\n+ alt.progressedPriority = fiber.progressedPriority;\n+\n alt.alternate = fiber;\n fiber.alternate = alt;\n return alt;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex 6c664784f0..a21bd4059a 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -15,10 +15,12 @@\n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n import type { HostConfig } from 'ReactFiberReconciler';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n \n var {\n reconcileChildFibers,\n reconcileChildFibersInPlace,\n+ cloneChildFibers,\n } = require('ReactChildFiber');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n@@ -35,48 +37,72 @@ var {\n NoWork,\n OffscreenPriority,\n } = require('ReactPriorityLevel');\n-var { findNextUnitOfWorkAtPriority } = require('ReactFiberPendingWork');\n \n module.exports = function(config : HostConfig) {\n \n+ function markChildAsProgressed(current, workInProgress, priorityLevel) {\n+ \/\/ We now have clones. Let's store them as the currently progressed work.\n+ workInProgress.progressedChild = workInProgress.child;\n+ workInProgress.progressedPriority = priorityLevel;\n+ if (current) {\n+ \/\/ We also store it on the current. When the alternate swaps in we can\n+ \/\/ continue from this point.\n+ current.progressedChild = workInProgress.progressedChild;\n+ current.progressedPriority = workInProgress.progressedPriority;\n+ }\n+ }\n+\n function reconcileChildren(current, workInProgress, nextChildren) {\n- const priority = workInProgress.pendingWorkPriority;\n- reconcileChildrenAtPriority(current, workInProgress, nextChildren, priority);\n+ const priorityLevel = workInProgress.pendingWorkPriority;\n+ reconcileChildrenAtPriority(current, workInProgress, nextChildren, priorityLevel);\n }\n \n function reconcileChildrenAtPriority(current, workInProgress, nextChildren, priorityLevel) {\n- if (current && current.childInProgress) {\n- workInProgress.childInProgress = reconcileChildFibersInPlace(\n- workInProgress,\n- current.childInProgress,\n- nextChildren,\n- priorityLevel\n- );\n- \/\/ This is now invalid because we reused nodes.\n- current.childInProgress = null;\n- } else if (workInProgress.childInProgress) {\n- workInProgress.childInProgress = reconcileChildFibersInPlace(\n+ \/\/ At this point any memoization is no longer valid since we'll have changed\n+ \/\/ the children.\n+ workInProgress.memoizedProps = null;\n+ if (current && current.child === workInProgress.child) {\n+ \/\/ If the current child is the same as the work in progress, it means that\n+ \/\/ we haven't yet started any work on these children. Therefore, we use\n+ \/\/ the clone algorithm to create a copy of all the current children.\n+ workInProgress.child = reconcileChildFibers(\n workInProgress,\n- workInProgress.childInProgress,\n+ workInProgress.child,\n nextChildren,\n priorityLevel\n );\n } else {\n- workInProgress.childInProgress = reconcileChildFibers(\n+ \/\/ If, on the other hand, we don't have a current fiber or if it is\n+ \/\/ already using a clone, that means we've already begun some work on this\n+ \/\/ tree and we can continue where we left off by reconciling against the\n+ \/\/ existing children.\n+ workInProgress.child = reconcileChildFibersInPlace(\n workInProgress,\n- current ? current.child : null,\n+ workInProgress.child,\n nextChildren,\n priorityLevel\n );\n }\n+ markChildAsProgressed(current, workInProgress, priorityLevel);\n }\n \n function updateFunctionalComponent(current, workInProgress) {\n var fn = workInProgress.type;\n var props = workInProgress.pendingProps;\n+\n+ \/\/ TODO: Disable this before release, since it is not part of the public API\n+ \/\/ I use this for testing to compare the relative overhead of classes.\n+ if (typeof fn.shouldComponentUpdate === 'function') {\n+ if (workInProgress.memoizedProps !== null) {\n+ if (!fn.shouldComponentUpdate(workInProgress.memoizedProps, props)) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ }\n+ }\n+ }\n+\n var nextChildren = fn(props);\n reconcileChildren(current, workInProgress, nextChildren);\n- workInProgress.pendingWorkPriority = NoWork;\n+ return workInProgress.child;\n }\n \n function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {\n@@ -86,14 +112,7 @@ module.exports = function(config : HostConfig) {\n var ctor = workInProgress.type;\n workInProgress.stateNode = instance = new ctor(props);\n } else if (typeof instance.shouldComponentUpdate === 'function') {\n- if (current && current.memoizedProps) {\n- \/\/ Revert to the last flushed props, incase we aborted an update.\n- instance.props = current.memoizedProps;\n- if (!instance.shouldComponentUpdate(props)) {\n- return bailoutOnCurrent(current, workInProgress);\n- }\n- }\n- if (!workInProgress.childInProgress && workInProgress.memoizedProps) {\n+ if (workInProgress.memoizedProps !== null) {\n \/\/ Reset the props, in case this is a ping-pong case rather than a\n \/\/ completed update case. For the completed update case, the instance\n \/\/ props will already be the memoizedProps.\n@@ -103,34 +122,40 @@ module.exports = function(config : HostConfig) {\n }\n }\n }\n+\n instance.props = props;\n var nextChildren = instance.render();\n reconcileChildren(current, workInProgress, nextChildren);\n- workInProgress.pendingWorkPriority = NoWork;\n- return workInProgress.childInProgress;\n+\n+ return workInProgress.child;\n }\n \n function updateHostComponent(current, workInProgress) {\n- var nextChildren = workInProgress.pendingProps.children;\n+ const nextChildren = workInProgress.pendingProps.children;\n+ if (workInProgress.pendingProps.hidden &&\n+ workInProgress.pendingWorkPriority !== OffscreenPriority) {\n+ \/\/ If this host component is hidden, we can bail out on the children.\n+ \/\/ We'll rerender the children later at the lower priority.\n+\n+ \/\/ It is unfortunate that we have to do the reconciliation of these\n+ \/\/ children already since that will add them to the tree even though\n+ \/\/ they are not actually done yet. If this is a large set it is also\n+ \/\/ confusing that this takes time to do right now instead of later.\n \n- let priority = workInProgress.pendingWorkPriority;\n- if (workInProgress.pendingProps.hidden && priority !== OffscreenPriority) {\n- \/\/ If this host component is hidden, we can reconcile its children at\n- \/\/ the lowest priority and bail out from this particular pass. Unless, we're\n- \/\/ currently reconciling the lowest priority.\n- \/\/ If we have a child in progress already, we reconcile against that set\n- \/\/ to retain any work within it. We'll recreate any component that was in\n- \/\/ the current set and next set but not in the previous in progress set.\n- \/\/ TODO: This attaches a node that hasn't completed rendering so it\n- \/\/ becomes part of the render tree, even though it never completed. Its\n- \/\/ `output` property is unpredictable because of it.\n+ if (workInProgress.progressedPriority === OffscreenPriority) {\n+ \/\/ If we already made some progress on the offscreen priority before,\n+ \/\/ then we should continue from where we left off.\n+ workInProgress.child = workInProgress.progressedChild;\n+ }\n+\n+ \/\/ Reconcile the children and stash them for later work.\n reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);\n- workInProgress.pendingWorkPriority = OffscreenPriority;\n+ workInProgress.child = current ? current.child : null;\n+ \/\/ Abort and don't process children yet.\n return null;\n } else {\n reconcileChildren(current, workInProgress, nextChildren);\n- workInProgress.pendingWorkPriority = NoWork;\n- return workInProgress.childInProgress;\n+ return workInProgress.child;\n }\n }\n \n@@ -141,19 +166,19 @@ module.exports = function(config : HostConfig) {\n if (typeof value === 'object' && value && typeof value.render === 'function') {\n \/\/ Proceed under the assumption that this is a class instance\n workInProgress.tag = ClassComponent;\n- if (workInProgress.alternate) {\n- workInProgress.alternate.tag = ClassComponent;\n+ if (current) {\n+ current.tag = ClassComponent;\n }\n value = value.render();\n } else {\n \/\/ Proceed under the assumption that this is a functional component\n workInProgress.tag = FunctionalComponent;\n- if (workInProgress.alternate) {\n- workInProgress.alternate.tag = FunctionalComponent;\n+ if (current) {\n+ current.tag = FunctionalComponent;\n }\n }\n reconcileChildren(current, workInProgress, value);\n- workInProgress.pendingWorkPriority = NoWork;\n+ return workInProgress.child;\n }\n \n function updateCoroutineComponent(current, workInProgress) {\n@@ -162,29 +187,9 @@ module.exports = function(config : HostConfig) {\n throw new Error('Should be resolved by now');\n }\n reconcileChildren(current, workInProgress, coroutine.children);\n- workInProgress.pendingWorkPriority = NoWork;\n- }\n-\n- function reuseChildren(returnFiber : Fiber, firstChild : Fiber) {\n- \/\/ TODO: None of this should be necessary if structured better.\n- \/\/ The returnFiber pointer only needs to be updated when we walk into this child\n- \/\/ which we don't do right now. If the pending work priority indicated only\n- \/\/ if a child has work rather than if the node has work, then we would know\n- \/\/ by a single lookup on workInProgress rather than having to go through\n- \/\/ each child.\n- let child = firstChild;\n- do {\n- \/\/ Update the returnFiber of the child to the newest fiber.\n- child.return = returnFiber;\n- \/\/ Retain the priority if there's any work left to do in the children.\n- if (child.pendingWorkPriority !== NoWork &&\n- (returnFiber.pendingWorkPriority === NoWork ||\n- returnFiber.pendingWorkPriority > child.pendingWorkPriority)) {\n- returnFiber.pendingWorkPriority = child.pendingWorkPriority;\n- }\n- } while (child = child.sibling);\n }\n \n+ \/*\n function reuseChildrenEffects(returnFiber : Fiber, firstChild : Fiber) {\n let child = firstChild;\n do {\n@@ -201,113 +206,81 @@ module.exports = function(config : HostConfig) {\n }\n } while (child = child.sibling);\n }\n-\n- function bailoutOnCurrent(current : Fiber, workInProgress : Fiber) : ?Fiber {\n- \/\/ The most likely scenario is that the previous copy of the tree contains\n- \/\/ the same props as the new one. In that case, we can just copy the output\n- \/\/ and children from that node.\n- workInProgress.memoizedProps = workInProgress.pendingProps;\n- workInProgress.output = current.output;\n- const priorityLevel = workInProgress.pendingWorkPriority;\n- workInProgress.pendingProps = null;\n- workInProgress.pendingWorkPriority = NoWork;\n- workInProgress.stateNode = current.stateNode;\n- workInProgress.childInProgress = current.childInProgress;\n- if (current.child) {\n- \/\/ If we bail out but still has work with the current priority in this\n- \/\/ subtree, we need to go find it right now. If we don't, we won't flush\n- \/\/ it until the next tick.\n- workInProgress.child = current.child;\n- reuseChildren(workInProgress, workInProgress.child);\n- if (workInProgress.pendingWorkPriority !== NoWork && workInProgress.pendingWorkPriority <= priorityLevel) {\n- \/\/ TODO: This passes the current node and reads the priority level and\n- \/\/ pending props from that. We want it to read our priority level and\n- \/\/ pending props from the work in progress. Needs restructuring.\n- return findNextUnitOfWorkAtPriority(current, priorityLevel);\n- } else {\n- return null;\n- }\n- } else {\n- workInProgress.child = null;\n- return null;\n- }\n- }\n+ *\/\n \n function bailoutOnAlreadyFinishedWork(current, workInProgress : Fiber) : ?Fiber {\n- \/\/ If we started this work before, and finished it, or if we're in a\n- \/\/ ping-pong update scenario, this version could already be what we're\n- \/\/ looking for. In that case, we should be able to just bail out.\n const priorityLevel = workInProgress.pendingWorkPriority;\n- workInProgress.pendingProps = null;\n- workInProgress.pendingWorkPriority = NoWork;\n \n- workInProgress.firstEffect = null;\n- workInProgress.nextEffect = null;\n- workInProgress.lastEffect = null;\n+ \/\/ TODO: We should ideally be able to bail out early if the children have no\n+ \/\/ more work to do. However, since we don't have a separation of this\n+ \/\/ Fiber's priority and its children yet - we don't know without doing lots\n+ \/\/ of the same work we do anyway. Once we have that separation we can just\n+ \/\/ bail out here if the children has no more work at this priority level.\n+ \/\/ if (workInProgress.priorityOfChildren <= priorityLevel) {\n+ \/\/ \/\/ If there are side-effects in these children that have not yet been\n+ \/\/ \/\/ committed we need to ensure that they get properly transferred up.\n+ \/\/ if (current && current.child !== workInProgress.child) {\n+ \/\/ reuseChildrenEffects(workInProgress, child);\n+ \/\/ }\n+ \/\/ return null;\n+ \/\/ }\n \n- if (workInProgress.child) {\n- \/\/ On the way up here, we reset the child node to be the current one by\n- \/\/ cloning. However, it is really the original child that represents the\n- \/\/ already completed work. Therefore we have to reuse the alternate.\n- \/\/ But if we don't have a current, this was not cloned. This is super weird.\n- const child = !current ? workInProgress.child : workInProgress.child.alternate;\n- if (!child) {\n- throw new Error('We must have a current child to be able to use this.');\n- }\n- workInProgress.child = child;\n- \/\/ Ensure that the effects of reused work are preserved.\n- reuseChildrenEffects(workInProgress, child);\n- \/\/ If we bail out but still has work with the current priority in this\n- \/\/ subtree, we need to go find it right now. If we don't, we won't flush\n- \/\/ it until the next tick.\n- reuseChildren(workInProgress, child);\n- if (workInProgress.pendingWorkPriority !== NoWork &&\n- workInProgress.pendingWorkPriority <= priorityLevel) {\n- \/\/ TODO: This passes the current node and reads the priority level and\n- \/\/ pending props from that. We want it to read our priority level and\n- \/\/ pending props from the work in progress. Needs restructuring.\n- return findNextUnitOfWorkAtPriority(workInProgress, priorityLevel);\n- }\n+ cloneChildFibers(current, workInProgress);\n+ markChildAsProgressed(current, workInProgress, priorityLevel);\n+ return workInProgress.child;\n+ }\n+\n+ function bailoutOnLowPriority(current, workInProgress) {\n+ if (current) {\n+ workInProgress.child = current.child;\n+ workInProgress.memoizedProps = current.memoizedProps;\n+ workInProgress.output = current.output;\n }\n return null;\n }\n \n- function beginWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n- \/\/ The current, flushed, state of this fiber is the alternate.\n- \/\/ Ideally nothing should rely on this, but relying on it here\n- \/\/ means that we don't need an additional field on the work in\n- \/\/ progress.\n- if (current && workInProgress.pendingProps === current.memoizedProps) {\n- return bailoutOnCurrent(current, workInProgress);\n+ function beginWork(current : ?Fiber, workInProgress : Fiber, priorityLevel : PriorityLevel) : ?Fiber {\n+ if (workInProgress.pendingWorkPriority === NoWork ||\n+ workInProgress.pendingWorkPriority > priorityLevel) {\n+ return bailoutOnLowPriority(current, workInProgress);\n }\n \n- if (!workInProgress.childInProgress &&\n- workInProgress.pendingProps === workInProgress.memoizedProps) {\n+ if (workInProgress.progressedPriority === priorityLevel) {\n+ \/\/ If we have progressed work on this priority level already, we can\n+ \/\/ proceed this that as the child.\n+ workInProgress.child = workInProgress.progressedChild;\n+ }\n+\n+ if (workInProgress.pendingProps === null || (\n+ workInProgress.memoizedProps !== null &&\n+ workInProgress.pendingProps === workInProgress.memoizedProps\n+ )) {\n return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n \n switch (workInProgress.tag) {\n case IndeterminateComponent:\n- mountIndeterminateComponent(current, workInProgress);\n- return workInProgress.childInProgress;\n+ return mountIndeterminateComponent(current, workInProgress);\n case FunctionalComponent:\n- updateFunctionalComponent(current, workInProgress);\n- return workInProgress.childInProgress;\n+ return updateFunctionalComponent(current, workInProgress);\n case ClassComponent:\n return updateClassComponent(current, workInProgress);\n case HostContainer:\n reconcileChildren(current, workInProgress, workInProgress.pendingProps);\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\n- workInProgress.pendingWorkPriority = NoWork;\n- if (workInProgress.childInProgress) {\n+ if (workInProgress.child) {\n return beginWork(\n- workInProgress.childInProgress.alternate,\n- workInProgress.childInProgress\n+ workInProgress.child.alternate,\n+ workInProgress.child,\n+ priorityLevel\n );\n }\n return null;\n case HostComponent:\n+ if (workInProgress.stateNode && config.beginUpdate) {\n+ config.beginUpdate(workInProgress.stateNode);\n+ }\n return updateHostComponent(current, workInProgress);\n case CoroutineHandlerPhase:\n \/\/ This is a restart. Reset the tag to the initial phase.\n@@ -317,21 +290,22 @@ module.exports = function(config : HostConfig) {\n updateCoroutineComponent(current, workInProgress);\n \/\/ This doesn't take arbitrary time so we could synchronously just begin\n \/\/ eagerly do the work of workInProgress.child as an optimization.\n- if (workInProgress.childInProgress) {\n+ if (workInProgress.child) {\n return beginWork(\n- workInProgress.childInProgress.alternate,\n- workInProgress.childInProgress\n+ workInProgress.child.alternate,\n+ workInProgress.child,\n+ priorityLevel\n );\n }\n- return workInProgress.childInProgress;\n+ return workInProgress.child;\n case YieldComponent:\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\n- workInProgress.pendingWorkPriority = NoWork;\n if (workInProgress.sibling) {\n return beginWork(\n workInProgress.sibling.alternate,\n- workInProgress.sibling\n+ workInProgress.sibling,\n+ priorityLevel\n );\n }\n return null;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex c7a9f2f710..2e3e8ae3d0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -28,7 +28,7 @@ module.exports = function(config : HostConfig) {\n const updateContainer = config.updateContainer;\n const commitUpdate = config.commitUpdate;\n \n- function commitWork(finishedWork : Fiber) : void {\n+ function commitWork(current : ?Fiber, finishedWork : Fiber) : void {\n switch (finishedWork.tag) {\n case ClassComponent: {\n \/\/ TODO: Fire componentDidMount\/componentDidUpdate, update refs\n@@ -43,14 +43,13 @@ module.exports = function(config : HostConfig) {\n return;\n }\n case HostComponent: {\n- if (finishedWork.stateNode == null || !finishedWork.alternate) {\n+ if (finishedWork.stateNode == null || !current) {\n throw new Error('This should only be done during updates.');\n }\n \/\/ Commit the work prepared earlier.\n const child = finishedWork.child;\n const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n const newProps = finishedWork.memoizedProps;\n- const current = finishedWork.alternate;\n const oldProps = current.memoizedProps;\n const instance : I = finishedWork.stateNode;\n commitUpdate(instance, oldProps, newProps, children);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex 53421116b4..14e95a0d73 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -162,10 +162,16 @@ module.exports = function(config : HostConfig) {\n \/\/ This returns true if there was something to update.\n markForPreEffect(workInProgress);\n }\n+ \/\/ TODO: Is this actually ever going to change? Why set it every time?\n workInProgress.output = instance;\n } else {\n if (!newProps) {\n- throw new Error('We must have new props for new mounts.');\n+ if (workInProgress.stateNode === null) {\n+ throw new Error('We must have new props for new mounts.');\n+ } else {\n+ \/\/ This can happen when we abort work.\n+ return null;\n+ }\n }\n const instance = createInstance(workInProgress.type, newProps, children);\n \/\/ TODO: This seems like unnecessary duplication.\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\ndeleted file mode 100644\nindex eb61c4595f..0000000000\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\n+++ \/dev\/null\n@@ -1,126 +0,0 @@\n-\/**\n- * Copyright 2013-present, Facebook, Inc.\n- * All rights reserved.\n- *\n- * This source code is licensed under the BSD-style license found in the\n- * LICENSE file in the root directory of this source tree. An additional grant\n- * of patent rights can be found in the PATENTS file in the same directory.\n- *\n- * @providesModule ReactFiberPendingWork\n- * @flow\n- *\/\n-\n-'use strict';\n-\n-import type { Fiber } from 'ReactFiber';\n-import type { PriorityLevel } from 'ReactPriorityLevel';\n-\n-var { cloneFiber } = require('ReactFiber');\n-\n-var {\n- NoWork,\n-} = require('ReactPriorityLevel');\n-\n-function cloneSiblings(current : Fiber, workInProgress : Fiber, returnFiber : Fiber) {\n- workInProgress.return = returnFiber;\n- while (current.sibling) {\n- current = current.sibling;\n- workInProgress = workInProgress.sibling = cloneFiber(\n- current,\n- current.pendingWorkPriority\n- );\n- workInProgress.return = returnFiber;\n- }\n- workInProgress.sibling = null;\n-}\n-\n-exports.findNextUnitOfWorkAtPriority = function(currentRoot : Fiber, priorityLevel : PriorityLevel) : ?Fiber {\n- let current = currentRoot;\n- while (current) {\n- if (current.pendingWorkPriority !== NoWork &&\n- current.pendingWorkPriority <= priorityLevel) {\n- \/\/ This node has work to do that fits our priority level criteria.\n- if (current.pendingProps !== null) {\n- \/\/ We found some work to do. We need to return the \"work in progress\"\n- \/\/ of this node which will be the alternate.\n- const workInProgress = current.alternate;\n- if (!workInProgress) {\n- throw new Error('Should have wip now');\n- }\n- workInProgress.pendingProps = current.pendingProps;\n- return workInProgress;\n- }\n-\n- \/\/ If we have a child let's see if any of our children has work to do.\n- \/\/ Only bother doing this at all if the current priority level matches\n- \/\/ because it is the highest priority for the whole subtree.\n- \/\/ TODO: Coroutines can have work in their stateNode which is another\n- \/\/ type of child that needs to be searched for work.\n- if (current.childInProgress) {\n- let workInProgress = current.childInProgress;\n- while (workInProgress) {\n- workInProgress.return = current.alternate;\n- workInProgress = workInProgress.sibling;\n- }\n- workInProgress = current.childInProgress;\n- while (workInProgress) {\n- \/\/ Don't bother drilling further down this tree if there is no child.\n- if (workInProgress.pendingWorkPriority !== NoWork &&\n- workInProgress.pendingWorkPriority <= priorityLevel &&\n- workInProgress.pendingProps !== null) {\n- return workInProgress;\n- }\n- workInProgress = workInProgress.sibling;\n- }\n- } else if (current.child) {\n- let currentChild = current.child;\n- currentChild.return = current;\n- \/\/ Ensure we have a work in progress copy to backtrack through.\n- let workInProgress = current.alternate;\n- if (!workInProgress) {\n- throw new Error('Should have wip now');\n- }\n- workInProgress.pendingWorkPriority = current.pendingWorkPriority;\n- \/\/ TODO: The below priority used to be set to NoWork which would've\n- \/\/ dropped work. This is currently unobservable but will become\n- \/\/ observable when the first sibling has lower priority work remaining\n- \/\/ than the next sibling. At that point we should add tests that catches\n- \/\/ this.\n- workInProgress.child = cloneFiber(\n- currentChild,\n- currentChild.pendingWorkPriority\n- );\n- cloneSiblings(currentChild, workInProgress.child, workInProgress);\n- current = currentChild;\n- continue;\n- }\n- \/\/ If we match the priority but has no child and no work to do,\n- \/\/ then we can safely reset the flag.\n- current.pendingWorkPriority = NoWork;\n- }\n- if (current === currentRoot) {\n- if (current.pendingWorkPriority <= priorityLevel) {\n- \/\/ If this subtree had work left to do, we would have returned it by\n- \/\/ now. This could happen if a child with pending work gets cleaned up\n- \/\/ but we don't clear the flag then. It is safe to reset it now.\n- current.pendingWorkPriority = NoWork;\n- }\n- return null;\n- }\n- while (!current.sibling) {\n- current = current.return;\n- if (!current) {\n- return null;\n- }\n- if (current.pendingWorkPriority <= priorityLevel) {\n- \/\/ If this subtree had work left to do, we would have returned it by\n- \/\/ now. This could happen if a child with pending work gets cleaned up\n- \/\/ but we don't clear the flag then. It is safe to reset it now.\n- current.pendingWorkPriority = NoWork;\n- }\n- }\n- current.sibling.return = current.return;\n- current = current.sibling;\n- }\n- return null;\n-};\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex d5e03669e6..bad5ee9477 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -70,6 +70,8 @@ module.exports = function(config : HostConfig) : Reconci\n const root = createFiberRoot(containerInfo);\n const container = root.current;\n \/\/ TODO: Use pending work\/state instead of props.\n+ \/\/ TODO: This should not override the pendingWorkPriority if there is\n+ \/\/ higher priority work in the subtree.\n container.pendingProps = element;\n container.pendingWorkPriority = LowPriority;\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex b6e7128968..e04c846f20 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -22,13 +22,9 @@ var ReactFiberCompleteWork = require('ReactFiberCompleteWork');\n var ReactFiberCommitWork = require('ReactFiberCommitWork');\n \n var { cloneFiber } = require('ReactFiber');\n-var { findNextUnitOfWorkAtPriority } = require('ReactFiberPendingWork');\n \n var {\n NoWork,\n- HighPriority,\n- LowPriority,\n- OffscreenPriority,\n } = require('ReactPriorityLevel');\n \n var timeHeuristicForUnitOfWork = 1;\n@@ -65,33 +61,23 @@ module.exports = function(config : HostConfig) {\n \/\/ TODO: This is scanning one root at a time. It should be scanning all\n \/\/ roots for high priority work before moving on to lower priorities.\n let root = nextScheduledRoot;\n+ let highestPriorityRoot = null;\n+ let highestPriorityLevel = NoWork;\n while (root) {\n- cloneFiber(root.current, root.current.pendingWorkPriority);\n- \/\/ Find the highest possible priority work to do.\n- \/\/ This loop is unrolled just to satisfy Flow's enum constraint.\n- \/\/ We could make arbitrary many idle priority levels but having\n- \/\/ too many just means flushing changes too often.\n- let work = findNextUnitOfWorkAtPriority(root.current, HighPriority);\n- if (work) {\n- nextPriorityLevel = HighPriority;\n- return work;\n- }\n- work = findNextUnitOfWorkAtPriority(root.current, LowPriority);\n- if (work) {\n- nextPriorityLevel = LowPriority;\n- return work;\n- }\n- work = findNextUnitOfWorkAtPriority(root.current, OffscreenPriority);\n- if (work) {\n- nextPriorityLevel = OffscreenPriority;\n- return work;\n+ if (highestPriorityLevel === NoWork ||\n+ highestPriorityLevel > root.current.pendingWorkPriority) {\n+ highestPriorityLevel = root.current.pendingWorkPriority;\n+ highestPriorityRoot = root;\n }\n \/\/ We didn't find anything to do in this root, so let's try the next one.\n root = root.nextScheduledRoot;\n }\n- root = nextScheduledRoot;\n- while (root) {\n- root = root.nextScheduledRoot;\n+ if (highestPriorityRoot) {\n+ nextPriorityLevel = highestPriorityLevel;\n+ return cloneFiber(\n+ highestPriorityRoot.current,\n+ highestPriorityLevel\n+ );\n }\n \n nextPriorityLevel = NoWork;\n@@ -103,7 +89,8 @@ module.exports = function(config : HostConfig) {\n \/\/ TODO: Error handling.\n let effectfulFiber = finishedWork.firstEffect;\n while (effectfulFiber) {\n- commitWork(effectfulFiber);\n+ const current = effectfulFiber.alternate;\n+ commitWork(current, effectfulFiber);\n const next = effectfulFiber.nextEffect;\n \/\/ Ensure that we clean these up so that we don't accidentally keep them.\n \/\/ I'm not actually sure this matters because we can't reset firstEffect\n@@ -114,6 +101,24 @@ module.exports = function(config : HostConfig) {\n }\n }\n \n+ function resetWorkPriority(workInProgress : Fiber) {\n+ let newPriority = NoWork;\n+ \/\/ progressedChild is going to be the child set with the highest priority.\n+ \/\/ Either it is the same as child, or it just bailed out because it choose\n+ \/\/ not to do the work.\n+ let child = workInProgress.progressedChild;\n+ while (child) {\n+ \/\/ Ensure that remaining work priority bubbles up.\n+ if (child.pendingWorkPriority !== NoWork &&\n+ (newPriority === NoWork ||\n+ newPriority > child.pendingWorkPriority)) {\n+ newPriority = child.pendingWorkPriority;\n+ }\n+ child = child.sibling;\n+ }\n+ workInProgress.pendingWorkPriority = newPriority;\n+ }\n+\n function completeUnitOfWork(workInProgress : Fiber) : ?Fiber {\n while (true) {\n \/\/ The current, flushed, state of this fiber is the alternate.\n@@ -123,6 +128,8 @@ module.exports = function(config : HostConfig) {\n const current = workInProgress.alternate;\n const next = completeWork(current, workInProgress);\n \n+ resetWorkPriority(workInProgress);\n+\n \/\/ The work is now done. We don't need this anymore. This flags\n \/\/ to the system not to redo any work here.\n workInProgress.pendingProps = null;\n@@ -130,12 +137,6 @@ module.exports = function(config : HostConfig) {\n const returnFiber = workInProgress.return;\n \n if (returnFiber) {\n- \/\/ Ensure that remaining work priority bubbles up.\n- if (workInProgress.pendingWorkPriority !== NoWork &&\n- (returnFiber.pendingWorkPriority === NoWork ||\n- returnFiber.pendingWorkPriority > workInProgress.pendingWorkPriority)) {\n- returnFiber.pendingWorkPriority = workInProgress.pendingWorkPriority;\n- }\n \/\/ Ensure that the first and last effect of the parent corresponds\n \/\/ to the children's first and last effect. This probably relies on\n \/\/ children completing in order.\n@@ -159,18 +160,16 @@ module.exports = function(config : HostConfig) {\n } else if (returnFiber) {\n \/\/ If there's no more work in this returnFiber. Complete the returnFiber.\n workInProgress = returnFiber;\n- \/\/ If we're stepping up through the child, that means we can now commit\n- \/\/ this work. We should only do this when we're stepping upwards because\n- \/\/ completing a downprioritized item is not the same as completing its\n- \/\/ children.\n- if (workInProgress.childInProgress) {\n- workInProgress.child = workInProgress.childInProgress;\n- workInProgress.childInProgress = null;\n- }\n continue;\n } else {\n \/\/ If we're at the root, there's no more work to do. We can flush it.\n const root : FiberRoot = (workInProgress.stateNode : any);\n+ if (root.current === workInProgress) {\n+ throw new Error(\n+ 'Cannot commit the same tree as before. This is probably a bug ' +\n+ 'related to the return field.'\n+ );\n+ }\n root.current = workInProgress;\n \/\/ TODO: We can be smarter here and only look for more work in the\n \/\/ \"next\" scheduled work since we've already scanned passed. That\n@@ -191,16 +190,13 @@ module.exports = function(config : HostConfig) {\n }\n \n function performUnitOfWork(workInProgress : Fiber) : ?Fiber {\n- \/\/ Ignore work if there is nothing to do.\n- if (workInProgress.pendingProps === null) {\n- return completeUnitOfWork(workInProgress);\n- }\n \/\/ The current, flushed, state of this fiber is the alternate.\n \/\/ Ideally nothing should rely on this, but relying on it here\n \/\/ means that we don't need an additional field on the work in\n \/\/ progress.\n const current = workInProgress.alternate;\n- const next = beginWork(current, workInProgress);\n+ const next = beginWork(current, workInProgress, nextPriorityLevel);\n+\n if (next) {\n \/\/ If this spawns new work, do that next.\n return next;\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex f69f84691b..608a95ea4f 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -410,7 +410,7 @@ describe('ReactIncremental', () => {\n \n \/\/ Init\n ReactNoop.render();\n- ReactNoop.flushLowPri(55);\n+ ReactNoop.flushLowPri(55 + 25);\n \n \/\/ We only finish the higher priority work. So the low pri content\n \/\/ has not yet finished mounting.\n@@ -432,7 +432,7 @@ describe('ReactIncremental', () => {\n \/\/ Make a quick update which will schedule low priority work to\n \/\/ update the middle content.\n ReactNoop.render();\n- ReactNoop.flushLowPri(30);\n+ ReactNoop.flushLowPri(30 + 25);\n \n expect(ops).toEqual(['Foo', 'Bar']);\n \n@@ -526,7 +526,7 @@ describe('ReactIncremental', () => {\n ops = [];\n \n \/\/ The middle content is now pending rendering...\n- ReactNoop.flushLowPri(30);\n+ ReactNoop.flushLowPri(30 + 25);\n expect(ops).toEqual(['Content', 'Middle', 'Bar']); \/\/ One more Middle left.\n \n ops = [];\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\nindex fbf6d0a712..63983720df 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -177,7 +177,7 @@ describe('ReactIncrementalSideEffects', () => {\n \/\/ render some higher priority work. The middle content will bailout so\n \/\/ it remains untouched which means that it should reuse it next time.\n ReactNoop.render();\n- ReactNoop.flush(30);\n+ ReactNoop.flush();\n \n \/\/ Since we did nothing to the middle subtree during the interuption,\n \/\/ we should be able to reuse the reconciliation work that we already did\n@@ -270,6 +270,86 @@ describe('ReactIncrementalSideEffects', () => {\n ]);\n });\n \n+ it('can defer side-effects and resume them later on', function() {\n+ class Bar extends React.Component {\n+ shouldComponentUpdate(nextProps) {\n+ return this.props.idx !== nextProps;\n+ }\n+ render() {\n+ return ;\n+ }\n+ }\n+ function Foo(props) {\n+ return (\n+

\n+ \n+

\n+ \n+ \n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(40 + 25);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(\n+ span(0),\n+ div(\/*the spans are down-prioritized and not rendered yet*\/)\n+ ),\n+ ]);\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(35 + 25);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(\n+ span(1),\n+ div(\/*still not rendered yet*\/)\n+ ),\n+ ]);\n+ ReactNoop.flushLowPri(30 + 25);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(\n+ span(1),\n+ div(\n+ \/\/ Now we had enough time to finish the spans.\n+ span(0),\n+ span(1)\n+ )\n+ ),\n+ ]);\n+ var innerSpanA = ReactNoop.root.children[0].children[1].children[1];\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(30 + 25);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(\n+ span(2),\n+ div(\n+ \/\/ Still same old numbers.\n+ span(0),\n+ span(1)\n+ )\n+ ),\n+ ]);\n+ ReactNoop.flushLowPri(30);\n+ expect(ReactNoop.root.children).toEqual([\n+ div(\n+ span(2),\n+ div(\n+ \/\/ New numbers.\n+ span(1),\n+ span(2)\n+ )\n+ ),\n+ ]);\n+\n+ var innerSpanB = ReactNoop.root.children[0].children[1].children[1];\n+ \/\/ This should have been an update to an existing instance, not recreation.\n+ \/\/ We verify that by ensuring that the child instance was the same as\n+ \/\/ before.\n+ expect(innerSpanA).toBe(innerSpanB);\n+ });\n+\n+\n \/\/ TODO: Test that side-effects are not cut off when a work in progress node\n \/\/ moves to \"current\" without flushing due to having lower priority. Does this\n \/\/ even happen? Maybe a child doesn't get processed because it is lower prio?\n","commit":{"subject":"Merge pull request #7636 from sebmarkbage\/fiberrefactor","revision":"a19fede67c96eed553e1b36f0d7786d1d668b61b","authorName":"Sebastian Markbåge","authorEmail":"sebastian@calyptus.eu","shortRevision":"a19fede67c","authoredAt":"2016-09-13T15:24:52-07:00"}}

dillon1000/react

Files changed