{"patch":"diff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex 7be5e5cc87..175b274549 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -16,7 +16,7 @@ import type { HostChildren } from 'ReactFiberReconciler';\n \n var ReactFiberReconciler = require('ReactFiberReconciler');\n \n-type DOMContainerElement = Element & { _reactRootContainer: Object };\n+type DOMContainerElement = Element & { _reactRootContainer: ?Object };\n \n type Container = Element;\n type Props = { };\n@@ -92,6 +92,16 @@ var ReactDOM = {\n }\n },\n \n+ unmountComponentAtNode(container : DOMContainerElement) {\n+ const root = container._reactRootContainer;\n+ if (root) {\n+ \/\/ TODO: Is it safe to reset this now or should I wait since this\n+ \/\/ unmount could be deferred?\n+ container._reactRootContainer = null;\n+ DOMRenderer.unmountContainer(root);\n+ }\n+ },\n+\n };\n \n module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 8404cf159b..82e64b5357 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -30,8 +30,8 @@ var scheduledLowPriCallback = null;\n const TERMINAL_TAG = 99;\n \n type Container = { rootID: number, children: Array };\n-type Props = { };\n-type Instance = { tag: 99, type: string, id: number, children: Array };\n+type Props = { prop: any };\n+type Instance = { tag: 99, type: string, id: number, children: Array, prop: any };\n \n var instanceCounter = 0;\n \n@@ -58,17 +58,16 @@ function flattenChildren(children : HostChildren) {\n var NoopRenderer = ReactFiberReconciler({\n \n updateContainer(containerInfo : Container, children : HostChildren) : void {\n- console.log('Update container #' + containerInfo.rootID);\n containerInfo.children = flattenChildren(children);\n },\n \n createInstance(type : string, props : Props, children : HostChildren) : Instance {\n- console.log('Create instance #' + instanceCounter);\n const inst = {\n tag: TERMINAL_TAG,\n id: instanceCounter++,\n type: type,\n children: flattenChildren(children),\n+ prop: props.prop,\n };\n \/\/ Hide from unit tests\n Object.defineProperty(inst, 'tag', { value: inst.tag, enumerable: false });\n@@ -77,17 +76,15 @@ var NoopRenderer = ReactFiberReconciler({\n },\n \n prepareUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren) : boolean {\n- console.log('Prepare for update on #' + instance.id);\n return true;\n },\n \n commitUpdate(instance : Instance, oldProps : Props, newProps : Props, children : HostChildren) : void {\n- console.log('Commit update on #' + instance.id);\n instance.children = flattenChildren(children);\n+ instance.prop = newProps.prop;\n },\n \n deleteInstance(instance : Instance) : void {\n- console.log('Delete #' + instance.id);\n },\n \n scheduleHighPriCallback(callback) {\n@@ -170,9 +167,21 @@ var ReactNoop = {\n \n function logFiber(fiber : Fiber, depth) {\n console.log(\n- ' '.repeat(depth) + '- ' + (fiber.type ? fiber.type.name || fiber.type : '[root]'), \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+ }\n+ }\n if (fiber.child) {\n logFiber(fiber.child, depth + 1);\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\nindex ddf4725a02..c3621c30ad 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n@@ -29,151 +29,181 @@ var {\n var ReactFiber = require('ReactFiber');\n var ReactReifiedYield = require('ReactReifiedYield');\n \n-function createSubsequentChild(\n- returnFiber : Fiber, \n- existingChild : ?Fiber, \n- previousSibling : Fiber, \n- newChildren, \n- priority : PriorityLevel\n-) : Fiber {\n- if (typeof newChildren !== 'object' || newChildren === null) {\n- return previousSibling;\n- }\n+const {\n+ cloneFiber,\n+ createFiberFromElement,\n+ createFiberFromCoroutine,\n+ createFiberFromYield,\n+} = ReactFiber;\n+\n+const {\n+ createReifiedYield,\n+} = ReactReifiedYield;\n+\n+const isArray = Array.isArray;\n+\n+function ChildReconciler(shouldClone) {\n+\n+ function createSubsequentChild(\n+ returnFiber : Fiber,\n+ existingChild : ?Fiber,\n+ previousSibling : Fiber,\n+ newChildren,\n+ priority : PriorityLevel\n+ ) : Fiber {\n+ if (typeof newChildren !== 'object' || newChildren === null) {\n+ return previousSibling;\n+ }\n \n- switch (newChildren.$$typeof) {\n- case REACT_ELEMENT_TYPE: {\n- const element = (newChildren : ReactElement);\n- if (existingChild &&\n- element.type === existingChild.type &&\n- element.key === existingChild.key) {\n- \/\/ TODO: This is not sufficient since previous siblings could be new.\n- \/\/ Will fix reconciliation properly later.\n- const clone = ReactFiber.cloneFiber(existingChild, priority);\n- clone.pendingProps = element.props;\n- clone.child = existingChild.child;\n- clone.sibling = null;\n- clone.return = returnFiber;\n- previousSibling.sibling = clone;\n- return clone;\n+ switch (newChildren.$$typeof) {\n+ case REACT_ELEMENT_TYPE: {\n+ const element = (newChildren : ReactElement);\n+ if (existingChild &&\n+ element.type === existingChild.type &&\n+ element.key === existingChild.key) {\n+ \/\/ TODO: This is not sufficient since previous siblings could be new.\n+ \/\/ Will fix reconciliation properly later.\n+ const clone = shouldClone ? cloneFiber(existingChild, priority) : existingChild;\n+ if (!shouldClone) {\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+ return clone;\n+ }\n+ const child = createFiberFromElement(element, priority);\n+ previousSibling.sibling = child;\n+ child.return = returnFiber;\n+ return child;\n }\n- const child = ReactFiber.createFiberFromElement(element, priority);\n- previousSibling.sibling = child;\n- child.return = returnFiber;\n- return child;\n- }\n \n- case REACT_COROUTINE_TYPE: {\n- const coroutine = (newChildren : ReactCoroutine);\n- const child = ReactFiber.createFiberFromCoroutine(coroutine, priority);\n- previousSibling.sibling = child;\n- child.return = returnFiber;\n- return child;\n- }\n+ case REACT_COROUTINE_TYPE: {\n+ const coroutine = (newChildren : ReactCoroutine);\n+ const child = createFiberFromCoroutine(coroutine, priority);\n+ previousSibling.sibling = child;\n+ child.return = returnFiber;\n+ return child;\n+ }\n \n- case REACT_YIELD_TYPE: {\n- const yieldNode = (newChildren : ReactYield);\n- const reifiedYield = ReactReifiedYield.createReifiedYield(yieldNode);\n- const child = ReactFiber.createFiberFromYield(yieldNode, priority);\n- child.output = reifiedYield;\n- previousSibling.sibling = child;\n- child.return = returnFiber;\n- return child;\n+ case REACT_YIELD_TYPE: {\n+ const yieldNode = (newChildren : ReactYield);\n+ const reifiedYield = createReifiedYield(yieldNode);\n+ const child = createFiberFromYield(yieldNode, priority);\n+ child.output = reifiedYield;\n+ previousSibling.sibling = child;\n+ child.return = returnFiber;\n+ return child;\n+ }\n }\n- }\n \n- if (Array.isArray(newChildren)) {\n- let prev : Fiber = previousSibling;\n- let existing : ?Fiber = existingChild;\n- for (var i = 0; i < newChildren.length; i++) {\n- prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n- if (prev && existing) {\n- \/\/ TODO: This is not correct because there could've been more\n- \/\/ than one sibling consumed but I don't want to return a tuple.\n- existing = existing.sibling;\n+ if (isArray(newChildren)) {\n+ let prev : Fiber = previousSibling;\n+ let existing : ?Fiber = existingChild;\n+ for (var i = 0; i < newChildren.length; i++) {\n+ var nextExisting = existing && existing.sibling;\n+ prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n+ if (prev && existing) {\n+ \/\/ TODO: This is not correct because there could've been more\n+ \/\/ than one sibling consumed but I don't want to return a tuple.\n+ existing = nextExisting;\n+ }\n }\n+ return prev;\n+ } else {\n+ \/\/ TODO: Throw for unknown children.\n+ return previousSibling;\n }\n- return prev;\n- } else {\n- console.log('Unknown child', newChildren);\n- return previousSibling;\n }\n-}\n \n-function createFirstChild(returnFiber, existingChild, newChildren, priority) {\n- if (typeof newChildren !== 'object' || newChildren === null) {\n- return null;\n- }\n+ function createFirstChild(returnFiber, existingChild, newChildren, priority) {\n+ if (typeof newChildren !== 'object' || newChildren === null) {\n+ return null;\n+ }\n \n- switch (newChildren.$$typeof) {\n- case REACT_ELEMENT_TYPE: {\n- const element = (newChildren : ReactElement);\n- if (existingChild &&\n- element.type === existingChild.type &&\n- element.key === existingChild.key) {\n- \/\/ Get the clone of the existing fiber.\n- const clone = ReactFiber.cloneFiber(existingChild, priority);\n- clone.pendingProps = element.props;\n- clone.child = existingChild.child;\n- clone.sibling = null;\n- clone.return = returnFiber;\n- return clone;\n+ switch (newChildren.$$typeof) {\n+ case REACT_ELEMENT_TYPE: {\n+ const element = (newChildren : ReactElement);\n+ if (existingChild &&\n+ element.type === existingChild.type &&\n+ element.key === existingChild.key) {\n+ \/\/ Get the clone of the existing fiber.\n+ const clone = shouldClone ? cloneFiber(existingChild, priority) : existingChild;\n+ if (!shouldClone) {\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+ }\n+ const child = createFiberFromElement(element, priority);\n+ child.return = returnFiber;\n+ return child;\n }\n- const child = ReactFiber.createFiberFromElement(element, priority);\n- child.return = returnFiber;\n- return child;\n- }\n \n- case REACT_COROUTINE_TYPE: {\n- const coroutine = (newChildren : ReactCoroutine);\n- const child = ReactFiber.createFiberFromCoroutine(coroutine, priority);\n- child.return = returnFiber;\n- return child;\n- }\n+ case REACT_COROUTINE_TYPE: {\n+ const coroutine = (newChildren : ReactCoroutine);\n+ const child = createFiberFromCoroutine(coroutine, priority);\n+ child.return = returnFiber;\n+ return child;\n+ }\n \n- case REACT_YIELD_TYPE: {\n- \/\/ A yield results in a fragment fiber whose output is the continuation.\n- \/\/ TODO: When there is only a single child, we can optimize this to avoid\n- \/\/ the fragment.\n- const yieldNode = (newChildren : ReactYield);\n- const reifiedYield = ReactReifiedYield.createReifiedYield(yieldNode);\n- const child = ReactFiber.createFiberFromYield(yieldNode, priority);\n- child.output = reifiedYield;\n- child.return = returnFiber;\n- return child;\n+ case REACT_YIELD_TYPE: {\n+ \/\/ A yield results in a fragment fiber whose output is the continuation.\n+ \/\/ TODO: When there is only a single child, we can optimize this to avoid\n+ \/\/ the fragment.\n+ const yieldNode = (newChildren : ReactYield);\n+ const reifiedYield = createReifiedYield(yieldNode);\n+ const child = createFiberFromYield(yieldNode, priority);\n+ child.output = reifiedYield;\n+ child.return = returnFiber;\n+ return child;\n+ }\n }\n- }\n \n- if (Array.isArray(newChildren)) {\n- var first : ?Fiber = null;\n- var prev : ?Fiber = null;\n- var existing : ?Fiber = existingChild;\n- for (var i = 0; i < newChildren.length; i++) {\n- if (prev == null) {\n- prev = createFirstChild(returnFiber, existing, newChildren[i], priority);\n- first = prev;\n- } else {\n- prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n- }\n- if (prev && existing) {\n- \/\/ TODO: This is not correct because there could've been more\n- \/\/ than one sibling consumed but I don't want to return a tuple.\n- existing = existing.sibling;\n+ if (isArray(newChildren)) {\n+ var first : ?Fiber = null;\n+ var prev : ?Fiber = null;\n+ var existing : ?Fiber = existingChild;\n+ for (var i = 0; i < newChildren.length; i++) {\n+ var nextExisting = existing && existing.sibling;\n+ if (prev == null) {\n+ prev = createFirstChild(returnFiber, existing, newChildren[i], priority);\n+ first = prev;\n+ } else {\n+ prev = createSubsequentChild(returnFiber, existing, prev, newChildren[i], priority);\n+ }\n+ if (prev && existing) {\n+ \/\/ TODO: This is not correct because there could've been more\n+ \/\/ than one sibling consumed but I don't want to return a tuple.\n+ existing = nextExisting;\n+ }\n }\n+ return first;\n+ } else {\n+ \/\/ TODO: Throw for unknown children.\n+ return null;\n }\n- return first;\n- } else {\n- console.log('Unknown child', newChildren);\n- return null;\n }\n+\n+ \/\/ TODO: This API won't work because we'll need to transfer the side-effects of\n+ \/\/ unmounting children to the returnFiber.\n+ function reconcileChildFibers(\n+ returnFiber : Fiber,\n+ currentFirstChild : ?Fiber,\n+ newChildren : ReactNodeList,\n+ priority : PriorityLevel\n+ ) : ?Fiber {\n+ return createFirstChild(returnFiber, currentFirstChild, newChildren, priority);\n+ }\n+\n+ return reconcileChildFibers;\n }\n \n-\/\/ TODO: This API won't work because we'll need to transfer the side-effects of\n-\/\/ unmounting children to the returnFiber.\n-exports.reconcileChildFibers = function(\n- returnFiber : Fiber, \n- currentFirstChild : ?Fiber, \n- newChildren : ReactNodeList, \n- priority : PriorityLevel\n-) : ?Fiber {\n- return createFirstChild(returnFiber, currentFirstChild, newChildren, priority);\n-};\n+exports.reconcileChildFibers = ChildReconciler(true);\n+\n+exports.reconcileChildFibersInPlace = ChildReconciler(false);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 39683f001e..2bcfe3f496 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -100,12 +100,9 @@ export type Fiber = Instance & {\n \/\/ memory if we need to.\n alternate: ?Fiber,\n \n- \/\/ Keeps track if we've completed this node or if we're currently in the\n- \/\/ middle of processing it. We really should know this based on pendingProps\n- \/\/ or something else. We could also reuse the tag for this purpose. However,\n- \/\/ I'm not really sure so I'll use a flag for now.\n- \/\/ TODO: Find another way to infer this flag.\n- hasWorkInProgress: bool,\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@@ -145,7 +142,7 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n \n pendingWorkPriority: NoWork,\n \n- hasWorkInProgress: false,\n+ childInProgress: null,\n \n alternate: null,\n \n@@ -167,6 +164,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\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@@ -186,8 +184,11 @@ 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+ \/\/ pendingProps is here for symmetry but is unnecessary in practice for now.\n+ alt.pendingProps = fiber.pendingProps;\n alt.pendingWorkPriority = priorityLevel;\n \n alt.alternate = fiber;\n@@ -201,13 +202,13 @@ exports.createHostContainerFiber = function() {\n };\n \n exports.createFiberFromElement = function(element : ReactElement, priorityLevel : PriorityLevel) {\n- const fiber = exports.createFiberFromElementType(element.type, element.key);\n+ const fiber = createFiberFromElementType(element.type, element.key);\n fiber.pendingProps = element.props;\n fiber.pendingWorkPriority = priorityLevel;\n return fiber;\n };\n \n-exports.createFiberFromElementType = function(type : mixed, key : null | string) {\n+function createFiberFromElementType(type : mixed, key : null | string) {\n let fiber;\n if (typeof type === 'function') {\n fiber = shouldConstruct(type) ?\n@@ -224,7 +225,9 @@ exports.createFiberFromElementType = function(type : mixed, key : null | string)\n throw new Error('Unknown component type: ' + typeof type);\n }\n return fiber;\n-};\n+}\n+\n+exports.createFiberFromElementType = createFiberFromElementType;\n \n exports.createFiberFromCoroutine = function(coroutine : ReactCoroutine, priorityLevel : PriorityLevel) {\n const fiber = createFiber(CoroutineComponent, coroutine.key);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex 0b28cd98cf..6c664784f0 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -16,7 +16,10 @@ import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n import type { HostConfig } from 'ReactFiberReconciler';\n \n-var ReactChildFiber = require('ReactChildFiber');\n+var {\n+ reconcileChildFibers,\n+ reconcileChildFibersInPlace,\n+} = require('ReactChildFiber');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n@@ -38,29 +41,76 @@ module.exports = function(config : HostConfig) {\n \n function reconcileChildren(current, workInProgress, nextChildren) {\n const priority = workInProgress.pendingWorkPriority;\n- workInProgress.child = ReactChildFiber.reconcileChildFibers(\n- workInProgress,\n- current ? current.child : null,\n- nextChildren,\n- priority\n- );\n+ reconcileChildrenAtPriority(current, workInProgress, nextChildren, priority);\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+ workInProgress,\n+ workInProgress.childInProgress,\n+ nextChildren,\n+ priorityLevel\n+ );\n+ } else {\n+ workInProgress.childInProgress = reconcileChildFibers(\n+ workInProgress,\n+ current ? current.child : null,\n+ nextChildren,\n+ priorityLevel\n+ );\n+ }\n }\n \n function updateFunctionalComponent(current, workInProgress) {\n var fn = workInProgress.type;\n var props = workInProgress.pendingProps;\n- console.log('update fn:', fn.name);\n var nextChildren = fn(props);\n reconcileChildren(current, workInProgress, nextChildren);\n workInProgress.pendingWorkPriority = NoWork;\n }\n \n- function updateHostComponent(current, workInProgress) {\n- console.log(\n- 'host component', workInProgress.type, \n- typeof workInProgress.pendingProps.children === 'string' ? workInProgress.pendingProps.children : ''\n- );\n+ function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {\n+ var props = workInProgress.pendingProps;\n+ var instance = workInProgress.stateNode;\n+ if (!instance) {\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+ \/\/ 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+ instance.props = workInProgress.memoizedProps;\n+ if (!instance.shouldComponentUpdate(props)) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\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 \n+ function updateHostComponent(current, workInProgress) {\n var nextChildren = workInProgress.pendingProps.children;\n \n let priority = workInProgress.pendingWorkPriority;\n@@ -68,23 +118,19 @@ module.exports = function(config : HostConfig) {\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- workInProgress.child = ReactChildFiber.reconcileChildFibers(\n- workInProgress,\n- current ? current.child : null,\n- nextChildren,\n- OffscreenPriority\n- );\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+ reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);\n workInProgress.pendingWorkPriority = OffscreenPriority;\n return null;\n } else {\n- workInProgress.child = ReactChildFiber.reconcileChildFibers(\n- workInProgress,\n- current ? current.child : null,\n- nextChildren,\n- priority\n- );\n+ reconcileChildren(current, workInProgress, nextChildren);\n workInProgress.pendingWorkPriority = NoWork;\n- return workInProgress.child;\n+ return workInProgress.childInProgress;\n }\n }\n \n@@ -93,14 +139,13 @@ module.exports = function(config : HostConfig) {\n var props = workInProgress.pendingProps;\n var value = fn(props);\n if (typeof value === 'object' && value && typeof value.render === 'function') {\n- console.log('performed work on class:', fn.name);\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 }\n+ value = value.render();\n } else {\n- console.log('performed work on fn:', fn.name);\n \/\/ Proceed under the assumption that this is a functional component\n workInProgress.tag = FunctionalComponent;\n if (workInProgress.alternate) {\n@@ -116,7 +161,6 @@ module.exports = function(config : HostConfig) {\n if (!coroutine) {\n throw new Error('Should be resolved by now');\n }\n- console.log('begin coroutine', workInProgress.type.name);\n reconcileChildren(current, workInProgress, coroutine.children);\n workInProgress.pendingWorkPriority = NoWork;\n }\n@@ -141,75 +185,125 @@ module.exports = function(config : HostConfig) {\n } while (child = child.sibling);\n }\n \n+ function reuseChildrenEffects(returnFiber : Fiber, firstChild : Fiber) {\n+ let child = firstChild;\n+ do {\n+ \/\/ Ensure that the first and last effect of the parent corresponds\n+ \/\/ to the children's first and last effect.\n+ if (!returnFiber.firstEffect) {\n+ returnFiber.firstEffect = child.firstEffect;\n+ }\n+ if (child.lastEffect) {\n+ if (returnFiber.lastEffect) {\n+ returnFiber.lastEffect.nextEffect = child.firstEffect;\n+ }\n+ returnFiber.lastEffect = child.lastEffect;\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+ 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+\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+ }\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- \/\/ 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- 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 <= 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.alternate, priorityLevel);\n- } else {\n- return null;\n- }\n- } else {\n- workInProgress.child = null;\n- return null;\n- }\n+ return bailoutOnCurrent(current, workInProgress);\n }\n \n- if (!workInProgress.hasWorkInProgress &&\n- workInProgress.pendingProps === workInProgress.memoizedProps &&\n- workInProgress.pendingWorkPriority === NoWork) {\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- workInProgress.pendingProps = null;\n- \/\/ TODO: We should be able to bail out if there is remaining work at a lower\n- \/\/ priority too. However, I don't know if that is safe or even better since\n- \/\/ the other tree could've potentially finished that work.\n- return null;\n+ if (!workInProgress.childInProgress &&\n+ workInProgress.pendingProps === workInProgress.memoizedProps) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n \n- workInProgress.hasWorkInProgress = true;\n-\n switch (workInProgress.tag) {\n case IndeterminateComponent:\n mountIndeterminateComponent(current, workInProgress);\n- return workInProgress.child;\n+ return workInProgress.childInProgress;\n case FunctionalComponent:\n updateFunctionalComponent(current, workInProgress);\n- return workInProgress.child;\n+ return workInProgress.childInProgress;\n case ClassComponent:\n- console.log('class component', workInProgress.pendingProps.type.name);\n- return workInProgress.child;\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.child) {\n+ if (workInProgress.childInProgress) {\n return beginWork(\n- workInProgress.child.alternate,\n- workInProgress.child\n+ workInProgress.childInProgress.alternate,\n+ workInProgress.childInProgress\n );\n }\n return null;\n@@ -223,13 +317,13 @@ 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.child) {\n+ if (workInProgress.childInProgress) {\n return beginWork(\n- workInProgress.child.alternate,\n- workInProgress.child\n+ workInProgress.childInProgress.alternate,\n+ workInProgress.childInProgress\n );\n }\n- return workInProgress.child;\n+ return workInProgress.childInProgress;\n case YieldComponent:\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 7792be2102..c7a9f2f710 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -47,7 +47,7 @@ module.exports = function(config : HostConfig) {\n throw new Error('This should only be done during updates.');\n }\n \/\/ Commit the work prepared earlier.\n- const child = (finishedWork.child : ?Fiber);\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;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex 9900a5b9fb..53421116b4 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -17,7 +17,7 @@ import type { Fiber } from 'ReactFiber';\n import type { HostConfig } from 'ReactFiberReconciler';\n import type { ReifiedYield } from 'ReactReifiedYield';\n \n-var ReactChildFiber = require('ReactChildFiber');\n+var { reconcileChildFibers } = require('ReactChildFiber');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n@@ -47,6 +47,9 @@ module.exports = function(config : HostConfig) {\n }\n \n \/*\n+ \/\/ TODO: It's possible this will create layout thrash issues because mutations\n+ \/\/ of the DOM and life-cycles are interleaved. E.g. if a componentDidMount\n+ \/\/ of a sibling reads, then the next sibling updates and reads etc.\n function markForPostEffect(workInProgress : Fiber) {\n \/\/ Schedule a side-effect on this fiber, AFTER the children's side-effects.\n if (workInProgress.lastEffect) {\n@@ -113,7 +116,7 @@ module.exports = function(config : HostConfig) {\n var currentFirstChild = current ? current.stateNode : null;\n \/\/ Inherit the priority of the returnFiber.\n const priority = workInProgress.pendingWorkPriority;\n- workInProgress.stateNode = ReactChildFiber.reconcileChildFibers(\n+ workInProgress.stateNode = reconcileChildFibers(\n workInProgress,\n currentFirstChild,\n nextChildren,\n@@ -125,11 +128,9 @@ module.exports = function(config : HostConfig) {\n function completeWork(current : ?Fiber, workInProgress : Fiber) : ?Fiber {\n switch (workInProgress.tag) {\n case FunctionalComponent:\n- console.log('\/functional component', workInProgress.type.name);\n transferOutput(workInProgress.child, workInProgress);\n return null;\n case ClassComponent:\n- console.log('\/class component', workInProgress.type.name);\n transferOutput(workInProgress.child, workInProgress);\n return null;\n case HostContainer:\n@@ -142,15 +143,20 @@ module.exports = function(config : HostConfig) {\n markForPreEffect(workInProgress);\n return null;\n case HostComponent:\n- console.log('\/host component', workInProgress.type);\n+ let newProps = workInProgress.pendingProps;\n const child = workInProgress.child;\n const children = (child && !child.sibling) ? (child.output : ?Fiber | I) : child;\n- const newProps = workInProgress.pendingProps;\n- workInProgress.memoizedProps = newProps;\n if (current && workInProgress.stateNode != null) {\n \/\/ If we have an alternate, that means this is an update and we need to\n \/\/ schedule a side-effect to do the updates.\n const oldProps = current.memoizedProps;\n+ \/\/ If we get updated because one of our children updated, we don't\n+ \/\/ have newProps so we'll have to reuse them.\n+ \/\/ TODO: Split the update API as separate for the props vs. children.\n+ \/\/ Even better would be if children weren't special cased at all tho.\n+ if (!newProps) {\n+ newProps = oldProps;\n+ }\n const instance : I = workInProgress.stateNode;\n if (prepareUpdate(instance, oldProps, newProps, children)) {\n \/\/ This returns true if there was something to update.\n@@ -158,14 +164,17 @@ module.exports = function(config : HostConfig) {\n }\n workInProgress.output = instance;\n } else {\n+ if (!newProps) {\n+ throw new Error('We must have new props for new mounts.');\n+ }\n const instance = createInstance(workInProgress.type, newProps, children);\n \/\/ TODO: This seems like unnecessary duplication.\n workInProgress.stateNode = instance;\n workInProgress.output = instance;\n }\n+ workInProgress.memoizedProps = newProps;\n return null;\n case CoroutineComponent:\n- console.log('\/coroutine component', workInProgress.pendingProps.handler.name);\n return moveCoroutineToHandlerPhase(current, workInProgress);\n case CoroutineHandlerPhase:\n transferOutput(workInProgress.stateNode, workInProgress);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\nindex 15d1a10134..eb61c4595f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberPendingWork.js\n@@ -15,16 +15,17 @@\n import type { Fiber } from 'ReactFiber';\n import type { PriorityLevel } from 'ReactPriorityLevel';\n \n-var ReactFiber = require('ReactFiber');\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 = ReactFiber.cloneFiber(\n+ workInProgress = workInProgress.sibling = cloneFiber(\n current,\n current.pendingWorkPriority\n );\n@@ -49,23 +50,48 @@ exports.findNextUnitOfWorkAtPriority = function(currentRoot : Fiber, priorityLev\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.child) {\n- \/\/ Ensure we have a work in progress copy to backtrack through.\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- workInProgress.child = ReactFiber.cloneFiber(currentChild, NoWork);\n- workInProgress.child.return = workInProgress;\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 = current.child;\n+ current = currentChild;\n continue;\n }\n \/\/ If we match the priority but has no child and no work to do,\n@@ -73,6 +99,12 @@ exports.findNextUnitOfWorkAtPriority = function(currentRoot : Fiber, priorityLev\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@@ -87,6 +119,7 @@ exports.findNextUnitOfWorkAtPriority = function(currentRoot : Fiber, priorityLev\n current.pendingWorkPriority = NoWork;\n }\n }\n+ current.sibling.return = current.return;\n current = current.sibling;\n }\n return null;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex cb22e88421..4ece60a0f2 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -73,7 +73,7 @@ module.exports = function(config : HostConfig) : Reconci\n container.pendingProps = element;\n container.pendingWorkPriority = LowPriority;\n \n- scheduleLowPriWork(root);\n+ scheduleLowPriWork(root, LowPriority);\n \n \/\/ It may seem strange that we don't return the root here, but that will\n \/\/ allow us to have containers that are in the middle of the tree instead\n@@ -88,7 +88,7 @@ module.exports = function(config : HostConfig) : Reconci\n root.current.pendingProps = element;\n root.current.pendingWorkPriority = LowPriority;\n \n- scheduleLowPriWork(root);\n+ scheduleLowPriWork(root, LowPriority);\n },\n \n unmountContainer(container : OpaqueNode) : void {\n@@ -98,7 +98,7 @@ module.exports = function(config : HostConfig) : Reconci\n root.current.pendingProps = [];\n root.current.pendingWorkPriority = LowPriority;\n \n- scheduleLowPriWork(root);\n+ scheduleLowPriWork(root, LowPriority);\n },\n \n getPublicRootInstance(container : OpaqueNode) : (C | null) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 6df6198f9f..b6e7128968 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -15,6 +15,7 @@\n import type { Fiber } from 'ReactFiber';\n import type { FiberRoot } from 'ReactFiberRoot';\n import type { HostConfig } from 'ReactFiberReconciler';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n \n var ReactFiberBeginWork = require('ReactFiberBeginWork');\n var ReactFiberCompleteWork = require('ReactFiberCompleteWork');\n@@ -43,6 +44,7 @@ module.exports = function(config : HostConfig) {\n \n \/\/ The next work in progress fiber that we're currently working on.\n let nextUnitOfWork : ?Fiber = null;\n+ let nextPriorityLevel : PriorityLevel = NoWork;\n \n \/\/ Linked list of roots with scheduled work on them.\n let nextScheduledRoot : ?FiberRoot = null;\n@@ -55,10 +57,13 @@ module.exports = function(config : HostConfig) {\n if (nextScheduledRoot === lastScheduledRoot) {\n nextScheduledRoot = null;\n lastScheduledRoot = null;\n+ nextPriorityLevel = NoWork;\n return null;\n }\n nextScheduledRoot = nextScheduledRoot.nextScheduledRoot;\n }\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 while (root) {\n cloneFiber(root.current, root.current.pendingWorkPriority);\n@@ -68,19 +73,28 @@ module.exports = function(config : HostConfig) {\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 }\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+ }\n+\n+ nextPriorityLevel = NoWork;\n return null;\n }\n \n@@ -112,9 +126,6 @@ module.exports = function(config : HostConfig) {\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- if (workInProgress.pendingWorkPriority === NoWork) {\n- workInProgress.hasWorkInProgress = false;\n- }\n \n const returnFiber = workInProgress.return;\n \n@@ -148,6 +159,15 @@ 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@@ -156,7 +176,6 @@ module.exports = function(config : HostConfig) {\n \/\/ \"next\" scheduled work since we've already scanned passed. That\n \/\/ also ensures that work scheduled during reconciliation gets deferred.\n \/\/ const hasMoreWork = workInProgress.pendingWorkPriority !== NoWork;\n- console.log('----- COMPLETED with remaining work:', workInProgress.pendingWorkPriority);\n commitAllWork(workInProgress);\n const nextWork = findNextUnitOfWork();\n \/\/ if (!nextWork && hasMoreWork) {\n@@ -209,11 +228,13 @@ module.exports = function(config : HostConfig) {\n }\n }\n \n- function scheduleLowPriWork(root : FiberRoot) {\n+ function scheduleLowPriWork(root : FiberRoot, priority : PriorityLevel) {\n \/\/ We must reset the current unit of work pointer so that we restart the\n \/\/ search from the root during the next tick, in case there is now higher\n \/\/ priority work somewhere earlier than before.\n- nextUnitOfWork = null;\n+ if (priority <= nextPriorityLevel) {\n+ nextUnitOfWork = null;\n+ }\n \n if (root.isScheduled) {\n \/\/ If we're already scheduled, we can bail out.\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactReifiedYield.js b\/src\/renderers\/shared\/fiber\/ReactReifiedYield.js\nindex 3f0e8a62e5..41ef6b9218 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactReifiedYield.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactReifiedYield.js\n@@ -15,12 +15,12 @@\n import type { ReactYield } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n \n-var ReactFiber = require('ReactFiber');\n+var { createFiberFromElementType } = require('ReactFiber');\n \n export type ReifiedYield = { continuation: Fiber, props: Object };\n \n exports.createReifiedYield = function(yieldNode : ReactYield) : ReifiedYield {\n- var fiber = ReactFiber.createFiberFromElementType(\n+ var fiber = createFiberFromElementType(\n yieldNode.continuation,\n yieldNode.key\n );\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactCoroutine-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactCoroutine-test.js\nindex cd54236258..553085c350 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactCoroutine-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactCoroutine-test.js\n@@ -20,7 +20,6 @@ describe('ReactCoroutine', function() {\n React = require('React');\n ReactNoop = require('ReactNoop');\n ReactCoroutine = require('ReactCoroutine');\n- spyOn(console, 'log');\n });\n \n it('should render a coroutine', function() {\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex 1fd0ac9fe9..65d3b09e0a 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -18,7 +18,6 @@ describe('ReactIncremental', function() {\n beforeEach(function() {\n React = require('React');\n ReactNoop = require('ReactNoop');\n- spyOn(console, 'log');\n });\n \n it('should render a simple component', function() {\n@@ -284,7 +283,6 @@ describe('ReactIncremental', function() {\n });\n \n it('can resume work in a bailed subtree within one pass', function() {\n-\n var ops = [];\n \n function Bar(props) {\n@@ -292,11 +290,16 @@ describe('ReactIncremental', function() {\n return

{props.children}<\/div>;\n }\n \n- function Tester() {\n- \/\/ This component is just here to ensure that the bail out is\n- \/\/ in fact in effect in the expected place for this test.\n- ops.push('Tester');\n- return

;\n+ class Tester extends React.Component {\n+ shouldComponentUpdate() {\n+ return false;\n+ }\n+ render() {\n+ \/\/ This component is just here to ensure that the bail out is\n+ \/\/ in fact in effect in the expected place for this test.\n+ ops.push('Tester');\n+ return

;\n+ }\n }\n \n function Middle(props) {\n@@ -304,23 +307,30 @@ describe('ReactIncremental', function() {\n return {props.children}<\/span>;\n }\n \n- var middleContent = (\n- \n- \n- \n- \n- Hi<\/Middle>\n- <\/ccc>\n- <\/bbb>\n- <\/aaa>\n- );\n+ \/\/ Should content not just bail out on current, not workInProgress?\n+\n+ class Content extends React.Component {\n+ shouldComponentUpdate() {\n+ return false;\n+ }\n+ render() {\n+ return [\n+ ,\n+ \n+ \n+ Hi<\/Middle>\n+ <\/ccc>\n+ <\/bbb>,\n+ ];\n+ }\n+ }\n \n function Foo(props) {\n ops.push('Foo');\n return (\n

\n {props.text}<\/Bar>\n- {middleContent}\n+ \n {props.text}<\/Bar>\n <\/div>\n );\n@@ -350,7 +360,6 @@ describe('ReactIncremental', function() {\n \/\/ after them which is not correct.\n ReactNoop.flush();\n expect(ops).toEqual(['Bar', 'Middle', 'Bar']);\n-\n });\n \n it('can reuse work done after being preempted', function() {\n@@ -375,19 +384,23 @@ describe('ReactIncremental', function() {\n <\/div>\n );\n \n+ var step0 = (\n+

\n+ Hi<\/Middle>\n+ {'Foo'}<\/Bar>\n+ There<\/Middle>\n+ <\/div>\n+ );\n+\n function Foo(props) {\n ops.push('Foo');\n return (\n

\n- {props.text}<\/Bar>\n+ {props.text2}<\/Bar>\n

\n {\n props.step === 0 ?\n-

\n- Hi<\/Middle>\n- {props.text}<\/Bar>\n- There<\/Middle>\n- <\/div>\n+ step0\n : middleContent\n }\n <\/div>\n@@ -395,13 +408,111 @@ describe('ReactIncremental', function() {\n );\n }\n \n- \/\/ Start rendering an update\n+ \/\/ Init\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(55);\n+\n+ \/\/ We only finish the higher priority work. So the low pri content\n+ \/\/ has not yet finished mounting.\n+ expect(ops).toEqual(['Foo', 'Bar', 'Middle', 'Bar']);\n+\n+ ops = [];\n+\n+ \/\/ Interupt the rendering with a quick update. This should not touch the\n+ \/\/ middle content.\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ \/\/ We've now rendered the entire tree but we didn't have to redo the work\n+ \/\/ done by the first Middle and Bar already.\n+ expect(ops).toEqual(['Foo', 'Bar', 'Middle']);\n+\n+ ops = [];\n+\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+\n+ expect(ops).toEqual(['Foo', 'Bar']);\n+\n+ ops = [];\n+\n+ \/\/ The middle content is now pending rendering...\n+ ReactNoop.flushLowPri(30);\n+ expect(ops).toEqual(['Middle', 'Bar']);\n+\n+ ops = [];\n+\n+ \/\/ but we'll interupt it to render some higher priority work.\n+ \/\/ The middle content will bailout so it remains untouched.\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(30);\n+\n+ expect(ops).toEqual(['Foo', 'Bar']);\n+\n+ ops = [];\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+ \/\/ without restarting.\n+ ReactNoop.flush();\n+ expect(ops).toEqual(['Middle']);\n+\n+ });\n+\n+ it('can reuse work if shouldComponentUpdate is false, after being preempted', function() {\n+\n+ var ops = [];\n+\n+ function Bar(props) {\n+ ops.push('Bar');\n+ return

{props.children}<\/div>;\n+ }\n+\n+ class Middle extends React.Component {\n+ shouldComponentUpdate(nextProps) {\n+ return this.props.children !== nextProps.children;\n+ }\n+ render() {\n+ ops.push('Middle');\n+ return {this.props.children}<\/span>;\n+ }\n+ }\n+\n+ class Content extends React.Component {\n+ shouldComponentUpdate(nextProps) {\n+ return this.props.step !== nextProps.step;\n+ }\n+ render() {\n+ ops.push('Content');\n+ return (\n+

\n+ {this.props.step === 0 ? 'Hi' : 'Hello'}<\/Middle>\n+ {this.props.step === 0 ? this.props.text : '-'}<\/Bar>\n+ {this.props.step === 0 ? 'There' : 'World'}<\/Middle>\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ function Foo(props) {\n+ ops.push('Foo');\n+ return (\n+

\n+ {props.text}<\/Bar>\n+

\n+ \n+ <\/div>\n+ <\/div>\n+ );\n+ }\n \n \/\/ Init\n ReactNoop.render();\n ReactNoop.flush();\n \n- expect(ops).toEqual(['Foo', 'Bar', 'Middle', 'Bar', 'Middle']);\n+ expect(ops).toEqual(['Foo', 'Bar', 'Content', 'Middle', 'Bar', 'Middle']);\n \n ops = [];\n \n@@ -416,7 +527,7 @@ describe('ReactIncremental', function() {\n \n \/\/ The middle content is now pending rendering...\n ReactNoop.flushLowPri(30);\n- expect(ops).toEqual(['Middle', 'Bar']);\n+ expect(ops).toEqual(['Content', 'Middle', 'Bar']); \/\/ One more Middle left.\n \n ops = [];\n \n@@ -433,8 +544,16 @@ describe('ReactIncremental', function() {\n \/\/ we should be able to reuse the reconciliation work that we already did\n \/\/ without restarting.\n ReactNoop.flush();\n- expect(ops).toEqual(['Middle']);\n+ \/\/ TODO: Content never fully completed its render so can't completely bail\n+ \/\/ out on the entire subtree. However, we could do a shallow bail out and\n+ \/\/ not rerender Content, but keep going down the incomplete tree.\n+ \/\/ Normally shouldComponentUpdate->false is not enough to determine that we\n+ \/\/ can safely reuse the old props, but I think in this case it would be ok,\n+ \/\/ since it is a resume of already started work.\n+ \/\/ Because of the above we can also not reuse the work of Bar because the\n+ \/\/ rerender of Content will generate a new element which will mean we don't\n+ \/\/ auto-bail out from Bar.\n+ expect(ops).toEqual(['Content', 'Bar', 'Middle']);\n \n });\n-\n });\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\nindex c59c12b97d..c606885561 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -14,19 +14,18 @@\n var React;\n var ReactNoop;\n \n-describe('ReactIncremental', function() {\n+describe('ReactIncrementalSideEffects', function() {\n beforeEach(function() {\n React = require('React');\n ReactNoop = require('ReactNoop');\n- spyOn(console, 'log');\n });\n \n function div(...children) {\n- return { type: 'div', children };\n+ return { type: 'div', children, prop: undefined };\n }\n \n- function span(...children) {\n- return { type: 'span', children };\n+ function span(prop) {\n+ return { type: 'span', children: [], prop };\n }\n \n it('can update child nodes of a host instance', function() {\n@@ -61,7 +60,7 @@ describe('ReactIncremental', function() {\n it('does not update child nodes if a flush is aborted', function() {\n \n function Bar(props) {\n- return {props.text}<\/span>;\n+ return ;\n }\n \n function Foo(props) {\n@@ -79,15 +78,196 @@ describe('ReactIncremental', function() {\n ReactNoop.render();\n ReactNoop.flush();\n expect(ReactNoop.root.children).toEqual([\n- div(div(span(), span()), span()),\n+ div(div(span('Hello'), span('Hello')), span('Yo')),\n ]);\n \n ReactNoop.render();\n ReactNoop.flushLowPri(35);\n expect(ReactNoop.root.children).toEqual([\n- div(div(span(), span()), span()),\n+ div(div(span('Hello'), span('Hello')), span('Yo')),\n+ ]);\n+\n+ });\n+\n+ it('preserves a previously rendered node when deprioritized', function() {\n+\n+ function Middle(props) {\n+ return ;\n+ }\n+\n+ function Foo(props) {\n+ return (\n+

\n+

\n+ {props.text}<\/Middle>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('foo'))),\n+ ]);\n+\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(20);\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('foo'))),\n+ ]);\n+\n+ ReactNoop.flush();\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('bar'))),\n+ ]);\n+\n+ });\n+\n+ it('can reuse side-effects after being preempted', function() {\n+\n+ function Bar(props) {\n+ return ;\n+ }\n+\n+ var middleContent = (\n+

\n+ Hello<\/Bar>\n+ World<\/Bar>\n+ <\/div>\n+ );\n+\n+ function Foo(props) {\n+ return (\n+

\n+ {\n+ props.step === 0 ?\n+

\n+ Hi<\/Bar>\n+ {props.text}<\/Bar>\n+ <\/div>\n+ : middleContent\n+ }\n+ <\/div>\n+ );\n+ }\n+\n+ \/\/ Init\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hi'), span('foo'))),\n+ ]);\n+\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+\n+ \/\/ The tree remains unchanged.\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hi'), span('foo'))),\n+ ]);\n+\n+ \/\/ The first Bar has already completed its update but we'll interupt it to\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+\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+ \/\/ without restarting. The side-effects should still be replayed.\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hello'), span('World'))),\n+ ]);\n+ });\n+\n+ it('can reuse side-effects after being preempted, if shouldComponentUpdate is false', function() {\n+\n+ class Bar extends React.Component {\n+ shouldComponentUpdate(nextProps) {\n+ return this.props.children !== nextProps.children;\n+ }\n+ render() {\n+ return ;\n+ }\n+ }\n+\n+ class Content extends React.Component {\n+ shouldComponentUpdate(nextProps) {\n+ return this.props.step !== nextProps.step;\n+ }\n+ render() {\n+ return (\n+

\n+ {this.props.step === 0 ? 'Hi' : 'Hello'}<\/Bar>\n+ {this.props.step === 0 ? this.props.text : 'World'}<\/Bar>\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ function Foo(props) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ \/\/ Init\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hi'), span('foo'))),\n+ ]);\n+\n+ \/\/ Make a quick update which will schedule low priority work to\n+ \/\/ update the middle content.\n+ ReactNoop.render();\n+ ReactNoop.flushLowPri(35);\n+\n+ \/\/ The tree remains unchanged.\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hi'), span('foo'))),\n ]);\n \n+ \/\/ The first Bar has already completed its update but we'll interupt it to\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+\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+ \/\/ without restarting. The side-effects should still be replayed.\n+\n+ expect(ReactNoop.root.children).toEqual([\n+ div(div(span('Hello'), span('World'))),\n+ ]);\n+ });\n+\n+ it('updates a child even though the old props is empty', function() {\n+ function Foo(props) {\n+ return (\n+

dillon1000/react

Files changed