Fiber Example<\/title>\n@@ -19,26 +19,154 @@\n <\/div>\n <script src=\"..\/..\/build\/react.js\"><\/script>\n <script src=\"..\/..\/build\/react-dom-fiber.js\"><\/script>\n- <script>\n- function ExampleApplication(props) {\n- var elapsed = Math.round(props.elapsed \/ 100);\n- var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n- var message =\n- 'React has been successfully running for ' + seconds + ' seconds.';\n-\n- return React.DOM.p(null, message);\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.24\/browser.min.js\"><\/script>\n+ <script type=\"text\/babel\">\n+ var dotStyle = {\n+ position: 'absolute',\n+ background: '#61dafb',\n+ font: 'normal 15px sans-serif',\n+ textAlign: 'center',\n+ cursor: 'pointer',\n+ };\n+\n+ var containerStyle = {\n+ position: 'absolute',\n+ transformOrigin: '0 0',\n+ left: '50%',\n+ top: '50%',\n+ width: '10px',\n+ height: '10px',\n+ background: '#eee',\n+ };\n+\n+ var targetSize = 25;\n+\n+ class Dot extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { hover: false };\n+ }\n+ enter() {\n+ this.setState({\n+ hover: true\n+ });\n+ }\n+ leave() {\n+ this.setState({\n+ hover: false\n+ });\n+ }\n+ render() {\n+ var props = this.props;\n+ var s = props.size * 1.3;\n+ var style = {\n+ ...dotStyle,\n+ width: s + 'px',\n+ height: s + 'px',\n+ left: (props.x) + 'px',\n+ top: (props.y) + 'px',\n+ borderRadius: (s \/ 2) + 'px',\n+ lineHeight: (s) + 'px',\n+ background: this.state.hover ? '#ff0' : dotStyle.background\n+ };\n+ return (\n+ <div style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>\n+ {this.state.hover ? '*' + props.text + '*' : props.text}\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ function SierpinskiTriangle({ x, y, s, children }) {\n+ if (s <= targetSize) {\n+ return (\n+ <Dot\n+ x={x - (targetSize \/ 2)}\n+ y={y - (targetSize \/ 2)}\n+ size={targetSize}\n+ text={children}\n+ \/>\n+ );\n+ return r;\n+ }\n+ var newSize = s \/ 2;\n+ var slowDown = false;\n+ if (slowDown) {\n+ var e = performance.now() + 0.8;\n+ while (performance.now() < e) {\n+ \/\/ Artificially long execution time.\n+ }\n+ }\n+\n+ s \/= 2;\n+\n+ return [\n+ <SierpinskiTriangle x={x} y={y - (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ <SierpinskiTriangle x={x - s} y={y + (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ <SierpinskiTriangle x={x + s} y={y + (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ ];\n }\n+ SierpinskiTriangle.shouldComponentUpdate = function(oldProps, newProps) {\n+ var o = oldProps;\n+ var n = newProps;\n+ return !(\n+ o.x === n.x &&\n+ o.y === n.y &&\n+ o.s === n.s &&\n+ o.children === n.children\n+ );\n+ };\n \n- \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n- var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+ class ExampleApplication extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { seconds: 0 };\n+ this.tick = this.tick.bind(this);\n+ }\n+ componentDidMount() {\n+ this.invervalID = setInterval(this.tick, 1000);\n+ }\n+ tick() {\n+ ReactDOMFiber.unstable_deferredUpdates(() =>\n+ this.setState(state => ({ seconds: (state.seconds % 10) + 1 }))\n+ );\n+ }\n+ componentWillUnmount() {\n+ clearInterval(this.intervalID);\n+ }\n+ render() {\n+ const seconds = this.state.seconds;\n+ const elapsed = this.props.elapsed;\n+ const t = (elapsed \/ 1000) % 10;\n+ const scale = 1 + (t > 5 ? 10 - t : t) \/ 10;\n+ const transform = 'scaleX(' + (scale \/ 2.1) + ') scaleY(0.7) translateZ(0.1px)';\n+ return (\n+ <div style={{ ...containerStyle, transform }}>\n+ <div>\n+ <SierpinskiTriangle x={0} y={0} s={1000}>\n+ {this.state.seconds}\n+ <\/SierpinskiTriangle>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ }\n \n var start = new Date().getTime();\n- setInterval(function() {\n+ function update() {\n ReactDOMFiber.render(\n- ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ <ExampleApplication elapsed={new Date().getTime() - start} \/>,\n document.getElementById('container')\n );\n- }, 50);\n+ requestAnimationFrame(update);\n+ }\n+ requestAnimationFrame(update);\n <\/script>\n <\/body>\n <\/html>\ndiff --git a\/scripts\/fiber\/tests-failing.txt b\/scripts\/fiber\/tests-failing.txt\nindex 034f765d97..da68b422e9 100644\n--- a\/scripts\/fiber\/tests-failing.txt\n+++ b\/scripts\/fiber\/tests-failing.txt\n@@ -71,13 +71,8 @@ src\/renderers\/shared\/shared\/__tests__\/ReactComponentLifeCycle-test.js\n * should carry through each of the phases of setup\n \n src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n-* should warn about `setState` in render\n-* should warn about `setState` in getChildContext\n * should update refs if shouldComponentUpdate gives false\n \n-src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponentState-test.js\n-* should update state when called from child cWRP\n-\n src\/renderers\/shared\/shared\/__tests__\/ReactEmptyComponent-test.js\n * should still throw when rendering to undefined\n * throws when rendering null at the top level\ndiff --git a\/scripts\/fiber\/tests-passing-except-dev.txt b\/scripts\/fiber\/tests-passing-except-dev.txt\nindex 6464c7d7ee..b112148a6e 100644\n--- a\/scripts\/fiber\/tests-passing-except-dev.txt\n+++ b\/scripts\/fiber\/tests-passing-except-dev.txt\n@@ -114,6 +114,8 @@ src\/renderers\/shared\/shared\/__tests__\/ReactComponentLifeCycle-test.js\n src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n * should warn about `forceUpdate` on unmounted components\n * should warn about `setState` on unmounted components\n+* should warn about `setState` in render\n+* should warn about `setState` in getChildContext\n * should disallow nested render calls\n \n src\/renderers\/shared\/shared\/__tests__\/ReactMultiChild-test.js\ndiff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex 21a5783ffb..5b821222ca 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -1230,6 +1230,16 @@ src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n * invokes ref callbacks after insertion\/update\/unmount\n * supports string refs\n \n+src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n+* applies updates in order of priority\n+* applies updates with equal priority in insertion order\n+* only drops updates with equal or lesser priority when replaceState is called\n+* can abort an update, schedule additional updates, and resume\n+* can abort an update, schedule a replaceState, and resume\n+* does not call callbacks that are scheduled by another callback until a later commit\n+* gives setState during reconciliation the same priority as whatever level is currently reconciling\n+* enqueues setState inside an updater function as if the in-progress update is progressed (and warns)\n+\n src\/renderers\/shared\/fiber\/__tests__\/ReactTopLevelFragment-test.js\n * should render a simple fragment at the top of a component\n * should preserve state when switching from a single child\n@@ -1382,6 +1392,7 @@ src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponentState-test.js\n * should support setting state\n * should call componentDidUpdate of children first\n * should batch unmounts\n+* should update state when called from child cWRP\n \n src\/renderers\/shared\/shared\/__tests__\/ReactEmptyComponent-test.js\n * should not produce child DOM nodes for null and false\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex 4c38e66f6b..19c29643f3 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -242,6 +242,8 @@ var ReactDOM = {\n \n unstable_batchedUpdates: ReactGenericBatching.batchedUpdates,\n \n+ unstable_deferredUpdates: DOMRenderer.deferredUpdates,\n+\n };\n \n module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex d16b6e7bf2..946be9f3b4 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -284,17 +284,20 @@ var ReactNoop = {\n \n function logUpdateQueue(updateQueue : UpdateQueue, depth) {\n log(\n- ' '.repeat(depth + 1) + 'QUEUED UPDATES',\n- updateQueue.isReplace ? 'is replace' : '',\n- updateQueue.isForced ? 'is forced' : ''\n+ ' '.repeat(depth + 1) + 'QUEUED UPDATES'\n );\n+ const firstUpdate = updateQueue.first;\n+ if (!firstUpdate) {\n+ return;\n+ }\n+\n log(\n ' '.repeat(depth + 1) + '~',\n- updateQueue.partialState,\n- updateQueue.callback ? 'with callback' : ''\n+ firstUpdate && firstUpdate.partialState,\n+ firstUpdate.callback ? 'with callback' : ''\n );\n var next;\n- while (next = updateQueue.next) {\n+ while (next = firstUpdate.next) {\n log(\n ' '.repeat(depth + 1) + '~',\n next.partialState,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 8873e2b46c..3b9a88fa88 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -43,6 +43,10 @@ var {\n NoEffect,\n } = require('ReactTypeOfSideEffect');\n \n+var {\n+ cloneUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n+\n var invariant = require('invariant');\n \n \/\/ A Fiber is work on a Component that needs to be done or was done. There can\n@@ -100,12 +104,13 @@ export type Fiber = {\n pendingProps: any, \/\/ This type will be more specific once we overload the tag.\n \/\/ TODO: I think that there is a way to merge pendingProps and memoizedProps.\n memoizedProps: any, \/\/ The props used to create the output.\n- \/\/ A queue of local state updates.\n- updateQueue: ?UpdateQueue,\n- \/\/ The state used to create the output. This is a full state object.\n+\n+ \/\/ A queue of state updates and callbacks.\n+ updateQueue: UpdateQueue | null,\n+ \/\/ A list of callbacks that should be called during the next commit.\n+ callbackList: UpdateQueue | null,\n+ \/\/ The state used to create the output\n memoizedState: any,\n- \/\/ Linked list of callbacks to call after updates are committed.\n- callbackList: ?UpdateQueue,\n \n \/\/ Effect\n effectTag: TypeOfSideEffect,\n@@ -194,8 +199,8 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n pendingProps: null,\n memoizedProps: null,\n updateQueue: null,\n- memoizedState: null,\n callbackList: null,\n+ memoizedState: null,\n \n effectTag: NoEffect,\n nextEffect: null,\n@@ -270,8 +275,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n \/\/ pendingProps is here for symmetry but is unnecessary in practice for now.\n \/\/ TODO: Pass in the new pendingProps as an argument maybe?\n alt.pendingProps = fiber.pendingProps;\n- alt.updateQueue = fiber.updateQueue;\n- alt.callbackList = fiber.callbackList;\n+ cloneUpdateQueue(alt, fiber);\n alt.pendingWorkPriority = priorityLevel;\n \n alt.memoizedProps = fiber.memoizedProps;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex bc98949e6f..94799919b9 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -25,7 +25,10 @@ var {\n reconcileChildFibersInPlace,\n cloneChildFibers,\n } = require('ReactChildFiber');\n-\n+var {\n+ hasPendingUpdate,\n+ beginUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n getMaskedContext,\n@@ -53,6 +56,7 @@ var {\n OffscreenPriority,\n } = require('ReactPriorityLevel');\n var {\n+ Update,\n Placement,\n ContentReset,\n Err,\n@@ -67,7 +71,10 @@ if (__DEV__) {\n module.exports = function<T, P, I, TI, C, CX>(\n config : HostConfig<T, P, I, TI, C, CX>,\n hostContext : HostContext<C, CX>,\n- scheduleUpdate : (fiber: Fiber) => void\n+ scheduleSetState: (fiber : Fiber, partialState : any) => void,\n+ scheduleReplaceState: (fiber : Fiber, state : any) => void,\n+ scheduleForceUpdate: (fiber : Fiber) => void,\n+ scheduleUpdateCallback: (fiber : Fiber, callback : Function) => void,\n ) {\n \n const { shouldSetTextContent } = config;\n@@ -84,7 +91,12 @@ module.exports = function<T, P, I, TI, C, CX>(\n mountClassInstance,\n resumeMountClassInstance,\n updateClassInstance,\n- } = ReactFiberClassComponent(scheduleUpdate);\n+ } = ReactFiberClassComponent(\n+ scheduleSetState,\n+ scheduleReplaceState,\n+ scheduleForceUpdate,\n+ scheduleUpdateCallback\n+ );\n \n function markChildAsProgressed(current, workInProgress, priorityLevel) {\n \/\/ We now have clones. Let's store them as the currently progressed work.\n@@ -195,24 +207,38 @@ module.exports = function<T, P, I, TI, C, CX>(\n return workInProgress.child;\n }\n \n- function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {\n+ function updateClassComponent(current : ?Fiber, workInProgress : Fiber, priorityLevel : PriorityLevel) {\n let shouldUpdate;\n if (!current) {\n if (!workInProgress.stateNode) {\n \/\/ In the initial pass we might need to construct the instance.\n constructClassInstance(workInProgress);\n- mountClassInstance(workInProgress);\n+ mountClassInstance(workInProgress, priorityLevel);\n shouldUpdate = true;\n } else {\n \/\/ In a resume, we'll already have an instance we can reuse.\n- shouldUpdate = resumeMountClassInstance(workInProgress);\n+ shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);\n }\n } else {\n- shouldUpdate = updateClassInstance(current, workInProgress);\n+ shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);\n }\n- if (!shouldUpdate) {\n+\n+ \/\/ Schedule side-effects\n+ if (shouldUpdate) {\n+ workInProgress.effectTag |= Update;\n+ } else {\n+ \/\/ If an update was already in progress, we should schedule an Update\n+ \/\/ effect even though we're bailing out, so that cWU\/cDU are called.\n+ if (current) {\n+ const instance = current.stateNode;\n+ if (instance.props !== current.memoizedProps ||\n+ instance.state !== current.memoizedState) {\n+ workInProgress.effectTag |= Update;\n+ }\n+ }\n return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n+\n \/\/ Rerender\n const instance = workInProgress.stateNode;\n ReactCurrentOwner.current = workInProgress;\n@@ -287,7 +313,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n }\n }\n \n- function mountIndeterminateComponent(current, workInProgress) {\n+ function mountIndeterminateComponent(current, workInProgress, priorityLevel) {\n if (current) {\n throw new Error('An indeterminate component should never have mounted.');\n }\n@@ -308,7 +334,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n \/\/ Proceed under the assumption that this is a class instance\n workInProgress.tag = ClassComponent;\n adoptClassInstance(workInProgress, value);\n- mountClassInstance(workInProgress);\n+ mountClassInstance(workInProgress, priorityLevel);\n ReactCurrentOwner.current = workInProgress;\n value = value.render();\n } else {\n@@ -471,22 +497,31 @@ module.exports = function<T, P, I, TI, C, CX>(\n workInProgress.child = workInProgress.progressedChild;\n }\n \n- if ((workInProgress.pendingProps === null || (\n- workInProgress.memoizedProps !== null &&\n- workInProgress.pendingProps === workInProgress.memoizedProps\n- )) &&\n- workInProgress.updateQueue === null &&\n- !hasContextChanged()) {\n- return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ const pendingProps = workInProgress.pendingProps;\n+ const memoizedProps = workInProgress.memoizedProps;\n+ const updateQueue = workInProgress.updateQueue;\n+\n+ \/\/ This is kept as a single expression to take advantage of short-circuiting.\n+ const hasNewProps = (\n+ pendingProps !== null && ( \/\/ hasPendingProps && (\n+ memoizedProps === null || \/\/ hasNoMemoizedProps ||\n+ pendingProps !== memoizedProps \/\/ memoizedPropsDontMatch\n+ ) \/\/ )\n+ );\n+ if (!hasNewProps) {\n+ const hasUpdate = updateQueue && hasPendingUpdate(updateQueue, priorityLevel);\n+ if (!hasUpdate && !hasContextChanged()) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ }\n }\n \n switch (workInProgress.tag) {\n case IndeterminateComponent:\n- return mountIndeterminateComponent(current, workInProgress);\n+ return mountIndeterminateComponent(current, workInProgress, priorityLevel);\n case FunctionalComponent:\n return updateFunctionalComponent(current, workInProgress);\n case ClassComponent:\n- return updateClassComponent(current, workInProgress);\n+ return updateClassComponent(current, workInProgress, priorityLevel);\n case HostRoot: {\n const root = (workInProgress.stateNode : FiberRoot);\n if (root.pendingContext) {\n@@ -497,8 +532,14 @@ module.exports = function<T, P, I, TI, C, CX>(\n } else {\n pushTopLevelContextObject(root.context, false);\n }\n+\n+ if (updateQueue) {\n+ beginUpdateQueue(workInProgress, updateQueue, null, null, null, priorityLevel);\n+ }\n+\n pushHostContainer(workInProgress.stateNode.containerInfo);\n- reconcileChildren(current, workInProgress, workInProgress.pendingProps);\n+ reconcileChildren(current, workInProgress, pendingProps);\n+\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\n return workInProgress.child;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\nindex 79595dd152..3772571f8d 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n@@ -13,17 +13,15 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n-import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n \n var {\n getMaskedContext,\n } = require('ReactFiberContext');\n var {\n- createUpdateQueue,\n- addToQueue,\n- addCallbackToQueue,\n- mergeUpdateQueue,\n+ beginUpdateQueue,\n } = require('ReactFiberUpdateQueue');\n+var { hasContextChanged } = require('ReactFiberContext');\n var { getComponentName, isMounted } = require('ReactFiberTreeReflection');\n var ReactInstanceMap = require('ReactInstanceMap');\n var shallowEqual = require('shallowEqual');\n@@ -32,53 +30,37 @@ var invariant = require('invariant');\n \n const isArray = Array.isArray;\n \n-module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n-\n- function scheduleUpdateQueue(fiber: Fiber, updateQueue: UpdateQueue) {\n- fiber.updateQueue = updateQueue;\n- \/\/ Schedule update on the alternate as well, since we don't know which tree\n- \/\/ is current.\n- if (fiber.alternate) {\n- fiber.alternate.updateQueue = updateQueue;\n- }\n- scheduleUpdate(fiber);\n- }\n+module.exports = function(\n+ scheduleSetState: (fiber : Fiber, partialState : any) => void,\n+ scheduleReplaceState: (fiber : Fiber, state : any) => void,\n+ scheduleForceUpdate: (fiber : Fiber) => void,\n+ scheduleUpdateCallback: (fiber : Fiber, callback : Function) => void,\n+) {\n \n \/\/ Class component state updater\n const updater = {\n isMounted,\n enqueueSetState(instance, partialState) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = fiber.updateQueue ?\n- addToQueue(fiber.updateQueue, partialState) :\n- createUpdateQueue(partialState);\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleSetState(fiber, partialState);\n },\n enqueueReplaceState(instance, state) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = createUpdateQueue(state);\n- updateQueue.isReplace = true;\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleReplaceState(fiber, state);\n },\n enqueueForceUpdate(instance) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = fiber.updateQueue || createUpdateQueue(null);\n- updateQueue.isForced = true;\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleForceUpdate(fiber);\n },\n enqueueCallback(instance, callback) {\n const fiber = ReactInstanceMap.get(instance);\n- let updateQueue = fiber.updateQueue ?\n- fiber.updateQueue :\n- createUpdateQueue(null);\n- addCallbackToQueue(updateQueue, callback);\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleUpdateCallback(fiber, callback);\n },\n };\n \n function checkShouldComponentUpdate(workInProgress, oldProps, newProps, newState, newContext) {\n- const updateQueue = workInProgress.updateQueue;\n- if (oldProps === null || (updateQueue && updateQueue.isForced)) {\n+ if (oldProps === null || (workInProgress.updateQueue && workInProgress.updateQueue.hasForceUpdate)) {\n+ \/\/ If the workInProgress already has an Update effect, return true\n return true;\n }\n \n@@ -226,7 +208,7 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n }\n \n \/\/ Invokes the mount life-cycles on a previously never rendered instance.\n- function mountClassInstance(workInProgress : Fiber) : void {\n+ function mountClassInstance(workInProgress : Fiber, priorityLevel : PriorityLevel) : void {\n const instance = workInProgress.stateNode;\n const state = instance.state || null;\n \n@@ -245,14 +227,21 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ process them now.\n const updateQueue = workInProgress.updateQueue;\n if (updateQueue) {\n- instance.state = mergeUpdateQueue(updateQueue, instance, state, props);\n+ instance.state = beginUpdateQueue(\n+ workInProgress,\n+ updateQueue,\n+ instance,\n+ state,\n+ props,\n+ priorityLevel\n+ );\n }\n }\n }\n \n \/\/ Called on a preexisting class instance. Returns false if a resumed render\n \/\/ could be reused.\n- function resumeMountClassInstance(workInProgress : Fiber) : boolean {\n+ function resumeMountClassInstance(workInProgress : Fiber, priorityLevel : PriorityLevel) : boolean {\n let newState = workInProgress.memoizedState;\n let newProps = workInProgress.pendingProps;\n if (!newProps) {\n@@ -294,13 +283,20 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ during initial mounting.\n const newUpdateQueue = workInProgress.updateQueue;\n if (newUpdateQueue) {\n- newInstance.state = mergeUpdateQueue(newUpdateQueue, newInstance, newState, newProps);\n+ newInstance.state = beginUpdateQueue(\n+ workInProgress,\n+ newUpdateQueue,\n+ newInstance,\n+ newState,\n+ newProps,\n+ priorityLevel\n+ );\n }\n return true;\n }\n \n \/\/ Invokes the update life-cycles and returns false if it shouldn't rerender.\n- function updateClassInstance(current : Fiber, workInProgress : Fiber) : boolean {\n+ function updateClassInstance(current : Fiber, workInProgress : Fiber, priorityLevel : PriorityLevel) : boolean {\n const instance = workInProgress.stateNode;\n \n const oldProps = workInProgress.memoizedProps || current.memoizedProps;\n@@ -332,19 +328,22 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ TODO: Previous state can be null.\n let newState;\n if (updateQueue) {\n- if (!updateQueue.hasUpdate) {\n- newState = oldState;\n- } else {\n- newState = mergeUpdateQueue(updateQueue, instance, oldState, newProps);\n- }\n+ newState = beginUpdateQueue(\n+ workInProgress,\n+ updateQueue,\n+ instance,\n+ oldState,\n+ newProps,\n+ priorityLevel\n+ );\n } else {\n newState = oldState;\n }\n \n if (oldProps === newProps &&\n oldState === newState &&\n- oldContext === newContext &&\n- updateQueue && !updateQueue.isForced) {\n+ !hasContextChanged() &&\n+ !(updateQueue && updateQueue.hasForceUpdate)) {\n return false;\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 5ff31e2d51..879fcf2485 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -25,12 +25,11 @@ var {\n HostPortal,\n CoroutineComponent,\n } = ReactTypeOfWork;\n-var { callCallbacks } = require('ReactFiberUpdateQueue');\n+var { commitCallbacks } = require('ReactFiberUpdateQueue');\n \n var {\n Placement,\n Update,\n- Callback,\n ContentReset,\n } = require('ReactTypeOfSideEffect');\n \n@@ -418,25 +417,17 @@ module.exports = function<T, P, I, TI, C, CX>(\n }\n attachRef(current, finishedWork, instance);\n }\n- \/\/ Clear updates from current fiber.\n- if (finishedWork.alternate) {\n- finishedWork.alternate.updateQueue = null;\n- }\n- if (finishedWork.effectTag & Callback) {\n- if (finishedWork.callbackList) {\n- const callbackList = finishedWork.callbackList;\n- finishedWork.callbackList = null;\n- callCallbacks(callbackList, instance);\n- }\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\n case HostRoot: {\n- const rootFiber = finishedWork.stateNode;\n- if (rootFiber.callbackList) {\n- const callbackList = rootFiber.callbackList;\n- rootFiber.callbackList = null;\n- callCallbacks(callbackList, rootFiber.current.child.stateNode);\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n+ const instance = finishedWork.child && finishedWork.child.stateNode;\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex d0a6ab217d..9c3a05501a 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -41,7 +41,6 @@ var {\n } = ReactTypeOfWork;\n var {\n Update,\n- Callback,\n } = ReactTypeOfSideEffect;\n \n if (__DEV__) {\n@@ -73,11 +72,6 @@ module.exports = function<T, P, I, TI, C, CX>(\n workInProgress.effectTag |= Update;\n }\n \n- function markCallback(workInProgress : Fiber) {\n- \/\/ Tag the fiber with a callback effect.\n- workInProgress.effectTag |= Callback;\n- }\n-\n function appendAllYields(yields : Array<ReifiedYield>, workInProgress : Fiber) {\n let node = workInProgress.child;\n while (node) {\n@@ -179,7 +173,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n case FunctionalComponent:\n workInProgress.memoizedProps = workInProgress.pendingProps;\n return null;\n- case ClassComponent:\n+ case ClassComponent: {\n \/\/ We are leaving this subtree, so pop context if any.\n if (isContextProvider(workInProgress)) {\n popContextProvider();\n@@ -187,27 +181,13 @@ module.exports = function<T, P, I, TI, C, CX>(\n \/\/ Don't use the state queue to compute the memoized state. We already\n \/\/ merged it and assigned it to the instance. Transfer it from there.\n \/\/ Also need to transfer the props, because pendingProps will be null\n- \/\/ in the case of an update\n- const { state, props } = workInProgress.stateNode;\n- const updateQueue = workInProgress.updateQueue;\n- workInProgress.memoizedState = state;\n- workInProgress.memoizedProps = props;\n- if (current) {\n- if (current.memoizedProps !== workInProgress.memoizedProps ||\n- current.memoizedState !== workInProgress.memoizedState ||\n- updateQueue && updateQueue.isForced) {\n- markUpdate(workInProgress);\n- }\n- } else {\n- markUpdate(workInProgress);\n- }\n- if (updateQueue && updateQueue.hasCallback) {\n- \/\/ Transfer update queue to callbackList field so callbacks can be\n- \/\/ called during commit phase.\n- workInProgress.callbackList = updateQueue;\n- markCallback(workInProgress);\n- }\n+ \/\/ in the case of an update.\n+ const instance = workInProgress.stateNode;\n+ workInProgress.memoizedState = instance.state;\n+ workInProgress.memoizedProps = instance.props;\n+\n return null;\n+ }\n case HostRoot: {\n workInProgress.memoizedProps = workInProgress.pendingProps;\n const fiberRoot = (workInProgress.stateNode : FiberRoot);\n@@ -215,9 +195,6 @@ module.exports = function<T, P, I, TI, C, CX>(\n fiberRoot.context = fiberRoot.pendingContext;\n fiberRoot.pendingContext = null;\n }\n- \/\/ TODO: Only mark this as an update if we have any pending callbacks\n- \/\/ on it.\n- markUpdate(workInProgress);\n return null;\n }\n case HostComponent:\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 582d7946e3..177fc674dc 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -24,8 +24,6 @@ var {\n var { createFiberRoot } = require('ReactFiberRoot');\n var ReactFiberScheduler = require('ReactFiberScheduler');\n \n-var { createUpdateQueue, addCallbackToQueue } = require('ReactFiberUpdateQueue');\n-\n if (__DEV__) {\n var ReactFiberInstrumentation = require('ReactFiberInstrumentation');\n }\n@@ -79,6 +77,7 @@ export type Reconciler<C, I, TI> = {\n \/\/ FIXME: ESLint complains about type parameter\n batchedUpdates<A>(fn : () => A) : A,\n syncUpdates<A>(fn : () => A) : A,\n+ deferredUpdates<A>(fn : () => A) : A,\n \/* eslint-enable no-undef *\/\n \n \/\/ Used to extract the return value from the initial render. Legacy API.\n@@ -99,9 +98,11 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n var {\n scheduleWork,\n+ scheduleUpdateCallback,\n performWithPriority,\n batchedUpdates,\n syncUpdates,\n+ deferredUpdates,\n } = ReactFiberScheduler(config);\n \n return {\n@@ -109,16 +110,19 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n mountContainer(element : ReactElement<any>, containerInfo : C, parentComponent : ?ReactComponent<any, any, any>, callback: ?Function) : OpaqueNode {\n const context = getContextForSubtree(parentComponent);\n const root = createFiberRoot(containerInfo, context);\n- const container = root.current;\n- if (callback) {\n- const queue = createUpdateQueue(null);\n- addCallbackToQueue(queue, callback);\n- root.callbackList = queue;\n- }\n- \/\/ TODO: Use pending work\/state instead of props.\n+ const current = root.current;\n+\n+ \/\/ TODO: Use the updateQueue and scheduleUpdate, instead of pendingProps.\n \/\/ TODO: This should not override the pendingWorkPriority if there is\n \/\/ higher priority work in the subtree.\n- container.pendingProps = element;\n+\n+ current.pendingProps = element;\n+ if (current.alternate) {\n+ current.alternate.pendingProps = element;\n+ }\n+ if (callback) {\n+ scheduleUpdateCallback(current, callback);\n+ }\n \n scheduleWork(root);\n \n@@ -129,24 +133,25 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\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 \/\/ of being roots.\n- return container;\n+ return current;\n },\n \n updateContainer(element : ReactElement<any>, container : OpaqueNode, parentComponent : ?ReactComponent<any, any, any>, callback: ?Function) : void {\n \/\/ TODO: If this is a nested container, this won't be the root.\n const root : FiberRoot = (container.stateNode : any);\n- if (callback) {\n- const queue = root.callbackList ?\n- root.callbackList :\n- createUpdateQueue(null);\n- addCallbackToQueue(queue, callback);\n- root.callbackList = queue;\n- }\n+ const current = root.current;\n+\n root.pendingContext = getContextForSubtree(parentComponent);\n- \/\/ TODO: Use pending work\/state instead of props.\n- root.current.pendingProps = element;\n- if (root.current.alternate) {\n- root.current.alternate.pendingProps = element;\n+\n+ \/\/ TODO: Use the updateQueue and scheduleUpdate, instead of pendingProps.\n+ \/\/ TODO: This should not override the pendingWorkPriority if there is\n+ \/\/ higher priority work in the subtree.\n+ current.pendingProps = element;\n+ if (current.alternate) {\n+ current.alternate.pendingProps = element;\n+ }\n+ if (callback) {\n+ scheduleUpdateCallback(current, callback);\n }\n \n scheduleWork(root);\n@@ -178,6 +183,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n syncUpdates,\n \n+ deferredUpdates,\n+\n getPublicRootInstance(container : OpaqueNode) : (ReactComponent<any, any, any> | I | TI | null) {\n const root : FiberRoot = (container.stateNode : any);\n const containerFiber = root.current;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\nindex 4da3b9d18e..47ef945dab 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n@@ -13,7 +13,6 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n-import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n \n const { createHostRootFiber } = require('ReactFiber');\n \n@@ -26,8 +25,6 @@ export type FiberRoot = {\n isScheduled: boolean,\n \/\/ The work schedule is a linked list.\n nextScheduledRoot: ?FiberRoot,\n- \/\/ Linked list of callbacks to call after updates are committed.\n- callbackList: ?UpdateQueue,\n \/\/ Top context object, used by renderSubtreeIntoContainer\n context: Object,\n pendingContext: ?Object,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 7bf2f7d7aa..88887082d6 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -53,6 +53,14 @@ var {\n ClassComponent,\n } = require('ReactTypeOfWork');\n \n+var {\n+ getPendingPriority,\n+ addUpdate,\n+ addReplaceUpdate,\n+ addForceUpdate,\n+ addCallback,\n+} = require('ReactFiberUpdateQueue');\n+\n var {\n unwindContext,\n } = require('ReactFiberContext');\n@@ -67,8 +75,14 @@ var timeHeuristicForUnitOfWork = 1;\n module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C, CX>) {\n const hostContext = ReactFiberHostContext(config);\n const { popHostContainer, popHostContext, resetHostContainer } = hostContext;\n- const { beginWork, beginFailedWork } =\n- ReactFiberBeginWork(config, hostContext, scheduleUpdate);\n+ const { beginWork, beginFailedWork } = ReactFiberBeginWork(\n+ config,\n+ hostContext,\n+ scheduleSetState,\n+ scheduleReplaceState,\n+ scheduleForceUpdate,\n+ scheduleUpdateCallback,\n+ );\n const { completeWork } = ReactFiberCompleteWork(config, hostContext);\n const {\n commitPlacement,\n@@ -85,10 +99,15 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n } = config;\n \n \/\/ The priority level to use when scheduling an update.\n+ \/\/ TODO: Should we change this to an array? Might be less confusing.\n let priorityContext : PriorityLevel = useSyncScheduling ?\n SynchronousPriority :\n LowPriority;\n \n+ \/\/ Keep track of this so we can reset the priority context if an error\n+ \/\/ is thrown during reconciliation.\n+ let priorityContextBeforeReconciliation : PriorityLevel = NoWork;\n+\n \/\/ Keeps track of whether we're currently in a work loop. Used to batch\n \/\/ nested updates.\n let isPerformingWork : boolean = false;\n@@ -139,6 +158,9 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ \/\/ findNextUnitOfWork mutates the current priority context. It is reset after\n+ \/\/ after the workLoop exits, so never call findNextUnitOfWork from outside\n+ \/\/ the work loop.\n function findNextUnitOfWork() {\n \/\/ Clear out roots with no more work on them, or if they have uncaught errors\n while (nextScheduledRoot && nextScheduledRoot.current.pendingWorkPriority === NoWork) {\n@@ -175,6 +197,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n if (highestPriorityRoot) {\n nextPriorityLevel = highestPriorityLevel;\n+ priorityContext = nextPriorityLevel;\n return cloneFiber(\n highestPriorityRoot.current,\n highestPriorityLevel\n@@ -199,7 +222,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \/\/ updates, and deletions. To avoid needing to add a case for every\n \/\/ possible bitmap value, we remove the secondary effects from the\n \/\/ effect tag and switch on that value.\n- let primaryEffectTag = nextEffect.effectTag & ~(Callback | Err | ContentReset);\n+ let primaryEffectTag =\n+ nextEffect.effectTag & ~(Callback | Err | ContentReset);\n switch (primaryEffectTag) {\n case Placement: {\n commitPlacement(nextEffect);\n@@ -355,7 +379,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \/\/ If we caught any errors during this commit, schedule their boundaries\n \/\/ to update.\n if (commitPhaseBoundaries) {\n- commitPhaseBoundaries.forEach(scheduleUpdate);\n+ commitPhaseBoundaries.forEach(scheduleErrorRecovery);\n commitPhaseBoundaries = null;\n }\n \n@@ -364,6 +388,14 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n function resetWorkPriority(workInProgress : Fiber) {\n let newPriority = NoWork;\n+\n+ \/\/ Check for pending update priority. This is usually null so it shouldn't\n+ \/\/ be a perf issue.\n+ const queue = workInProgress.updateQueue;\n+ if (queue) {\n+ newPriority = getPendingPriority(queue);\n+ }\n+\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@@ -392,7 +424,6 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\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- workInProgress.updateQueue = null;\n \n const returnFiber = workInProgress.return;\n const siblingFiber = workInProgress.sibling;\n@@ -459,6 +490,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \n function performUnitOfWork(workInProgress : Fiber) : ?Fiber {\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@@ -491,10 +523,13 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n ReactDebugCurrentFiber.current = null;\n }\n \n+\n+\n return next;\n }\n \n function performFailedUnitOfWork(workInProgress : Fiber) : ?Fiber {\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@@ -642,28 +677,25 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \n \/\/ Before starting any work, check to see if there are any pending\n- \/\/ commits from the previous frame. An exception is if we're flushing\n- \/\/ Task work in a deferred batch and the pending commit does not\n- \/\/ have Task priority.\n- if (pendingCommit) {\n- const isFlushingTaskWorkInDeferredBatch =\n- priorityLevel === TaskPriority &&\n- isPerformingDeferredWork &&\n- pendingCommit.pendingWorkPriority !== TaskPriority;\n- if (!isFlushingTaskWorkInDeferredBatch) {\n- commitAllWork(pendingCommit);\n- }\n+ \/\/ commits from the previous frame.\n+ if (pendingCommit && !deadlineHasExpired) {\n+ commitAllWork(pendingCommit);\n }\n \n \/\/ Nothing in performWork should be allowed to throw. All unsafe\n \/\/ operations must happen within workLoop, which is extracted to a\n \/\/ separate function so that it can be optimized by the JS engine.\n try {\n+ priorityContextBeforeReconciliation = priorityContext;\n+ priorityContext = nextPriorityLevel;\n deadlineHasExpired = workLoop(priorityLevel, deadline, deadlineHasExpired);\n } catch (error) {\n \/\/ We caught an error during either the begin or complete phases.\n const failedWork = nextUnitOfWork;\n \n+ \/\/ Reset the priority context to its value before reconcilation.\n+ priorityContext = priorityContextBeforeReconciliation;\n+\n \/\/ \"Capture\" the error by finding the nearest boundary. If there is no\n \/\/ error boundary, the nearest host container acts as one. If\n \/\/ captureError returns null, the error was intentionally ignored.\n@@ -691,6 +723,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \/\/ Continue performing work\n continue;\n+ } finally {\n+ priorityContext = priorityContextBeforeReconciliation;\n }\n \n \/\/ Stop performing work\n@@ -828,11 +862,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n commitPhaseBoundaries.add(boundary);\n } else {\n- \/\/ Otherwise, schedule an update now. Error recovery has Task priority.\n- const previousPriorityContext = priorityContext;\n- priorityContext = TaskPriority;\n- scheduleUpdate(boundary);\n- priorityContext = previousPriorityContext;\n+ \/\/ Otherwise, schedule an update now.\n+ scheduleErrorRecovery(boundary);\n }\n return boundary;\n } else if (!firstUncaughtError) {\n@@ -982,8 +1013,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n- function scheduleUpdate(fiber : Fiber) {\n- let priorityLevel = priorityContext;\n+ function scheduleUpdateAtPriority(fiber : Fiber, priorityLevel : PriorityLevel) {\n \/\/ If we're in a batch, downgrade sync priority to task priority\n if (priorityLevel === SynchronousPriority && isPerformingWork) {\n priorityLevel = TaskPriority;\n@@ -1023,6 +1053,30 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ function scheduleErrorRecovery(fiber : Fiber) {\n+ scheduleUpdateAtPriority(fiber, TaskPriority);\n+ }\n+\n+ function scheduleSetState(fiber : Fiber, partialState : any) {\n+ addUpdate(fiber, partialState, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleReplaceState(fiber : Fiber, state : any) {\n+ addReplaceUpdate(fiber, state, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleForceUpdate(fiber : Fiber) {\n+ addForceUpdate(fiber, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleUpdateCallback(fiber : Fiber, callback : Function) {\n+ addCallback(fiber, callback, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n function performWithPriority(priorityLevel : PriorityLevel, fn : Function) {\n const previousPriorityContext = priorityContext;\n priorityContext = priorityLevel;\n@@ -1059,10 +1113,22 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ function deferredUpdates<A>(fn : () => A) : A {\n+ const previousPriorityContext = priorityContext;\n+ priorityContext = LowPriority;\n+ try {\n+ return fn();\n+ } finally {\n+ priorityContext = previousPriorityContext;\n+ }\n+ }\n+\n return {\n scheduleWork: scheduleWork,\n+ scheduleUpdateCallback: scheduleUpdateCallback,\n performWithPriority: performWithPriority,\n batchedUpdates: batchedUpdates,\n syncUpdates: syncUpdates,\n+ deferredUpdates: deferredUpdates,\n };\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\nindex 5fe2eafdbe..50f8ceeb47 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\n@@ -12,100 +12,479 @@\n \n 'use strict';\n \n-type UpdateQueueNode = {\n- partialState: any,\n- callback: ?Function,\n+import type { Fiber } from 'ReactFiber';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n+\n+const {\n+ Callback: CallbackEffect,\n+} = require('ReactTypeOfSideEffect');\n+\n+const {\n+ NoWork,\n+ SynchronousPriority,\n+ TaskPriority,\n+} = require('ReactPriorityLevel');\n+\n+type PartialState<State, Props> =\n+ $Subtype<State> |\n+ (prevState: State, props: Props) => $Subtype<State>;\n+\n+type Callback = () => void;\n+\n+type Update = {\n+ priorityLevel: PriorityLevel,\n+ partialState: PartialState<any, any>,\n+ callback: Callback | null,\n isReplace: boolean,\n- next: ?UpdateQueueNode,\n+ isForced: boolean,\n+ next: Update | null,\n };\n \n-export type UpdateQueue = UpdateQueueNode & {\n- isForced: boolean,\n- hasUpdate: boolean,\n- hasCallback: boolean,\n- tail: UpdateQueueNode\n+\/\/ Singly linked-list of updates. When an update is scheduled, it is added to\n+\/\/ the queue of the current fiber and the work-in-progress fiber. The two queues\n+\/\/ are separate but they share a persistent structure.\n+\/\/\n+\/\/ During reconciliation, updates are removed from the work-in-progress fiber,\n+\/\/ but they remain on the current fiber. That ensures that if a work-in-progress\n+\/\/ is aborted, the aborted updates are recovered by cloning from current.\n+\/\/\n+\/\/ The work-in-progress queue is always a subset of the current queue.\n+\/\/\n+\/\/ When the tree is committed, the work-in-progress becomes the current.\n+export type UpdateQueue = {\n+ first: Update | null,\n+ last: Update | null,\n+ hasForceUpdate: boolean,\n+\n+ \/\/ Dev only\n+ isProcessing?: boolean,\n };\n \n-exports.createUpdateQueue = function(partialState : mixed) : UpdateQueue {\n- const queue = {\n+function comparePriority(a : PriorityLevel, b : PriorityLevel) : number {\n+ \/\/ When comparing update priorities, treat sync and Task work as equal.\n+ \/\/ TODO: Could we avoid the need for this by always coercing sync priority\n+ \/\/ to Task when scheduling an update?\n+ if ((a === TaskPriority || a === SynchronousPriority) &&\n+ (b === TaskPriority || b === SynchronousPriority)) {\n+ return 0;\n+ }\n+ if (a === NoWork && b !== NoWork) {\n+ return -255;\n+ }\n+ if (a !== NoWork && b === NoWork) {\n+ return 255;\n+ }\n+ return a - b;\n+}\n+\n+function hasPendingUpdate(queue : UpdateQueue, priorityLevel : PriorityLevel) : boolean {\n+ if (!queue.first) {\n+ return false;\n+ }\n+ \/\/ Return true if the first pending update has greater or equal priority.\n+ return comparePriority(queue.first.priorityLevel, priorityLevel) <= 0;\n+}\n+exports.hasPendingUpdate = hasPendingUpdate;\n+\n+\/\/ Ensures that a fiber has an update queue, creating a new one if needed.\n+\/\/ Returns the new or existing queue.\n+function ensureUpdateQueue(fiber : Fiber) : UpdateQueue {\n+ if (fiber.updateQueue) {\n+ \/\/ We already have an update queue.\n+ return fiber.updateQueue;\n+ }\n+\n+ let queue;\n+ if (__DEV__) {\n+ queue = {\n+ first: null,\n+ last: null,\n+ hasForceUpdate: false,\n+ isProcessing: false,\n+ };\n+ } else {\n+ queue = {\n+ first: null,\n+ last: null,\n+ hasForceUpdate: false,\n+ };\n+ }\n+\n+ fiber.updateQueue = queue;\n+ return queue;\n+}\n+\n+\/\/ Clones an update queue from a source fiber onto its alternate.\n+function cloneUpdateQueue(alt : Fiber, fiber : Fiber) : UpdateQueue | null {\n+ const sourceQueue = fiber.updateQueue;\n+ if (!sourceQueue) {\n+ \/\/ The source fiber does not have an update queue.\n+ alt.updateQueue = null;\n+ return null;\n+ }\n+ \/\/ If the alternate already has a queue, reuse the previous object.\n+ const altQueue = alt.updateQueue || {};\n+ altQueue.first = sourceQueue.first;\n+ altQueue.last = sourceQueue.last;\n+ altQueue.hasForceUpdate = sourceQueue.hasForceUpdate;\n+ alt.updateQueue = altQueue;\n+ return altQueue;\n+}\n+exports.cloneUpdateQueue = cloneUpdateQueue;\n+\n+function cloneUpdate(update : Update) : Update {\n+ return {\n+ priorityLevel: update.priorityLevel,\n+ partialState: update.partialState,\n+ callback: update.callback,\n+ isReplace: update.isReplace,\n+ isForced: update.isForced,\n+ next: null,\n+ };\n+}\n+\n+function insertUpdateIntoQueue(queue, update, insertAfter, insertBefore) {\n+ if (insertAfter) {\n+ insertAfter.next = update;\n+ } else {\n+ \/\/ This is the first item in the queue.\n+ update.next = queue.first;\n+ queue.first = update;\n+ }\n+\n+ if (insertBefore) {\n+ update.next = insertBefore;\n+ } else {\n+ \/\/ This is the last item in the queue.\n+ queue.last = update;\n+ }\n+}\n+\n+\/\/ The work-in-progress queue is a subset of the current queue (if it exists).\n+\/\/ We need to insert the incoming update into both lists. However, it's possible\n+\/\/ that the correct position in one list will be different from the position in\n+\/\/ the other. Consider the following case:\n+\/\/\n+\/\/ Current: 3-5-6\n+\/\/ Work-in-progress: 6\n+\/\/\n+\/\/ Then we receive an update with priority 4 and insert it into each list:\n+\/\/\n+\/\/ Current: 3-4-5-6\n+\/\/ Work-in-progress: 4-6\n+\/\/\n+\/\/ In the current queue, the new update's `next` pointer points to the update\n+\/\/ with priority 5. But in the work-in-progress queue, the pointer points to the\n+\/\/ update with priority 6. Because these two queues share the same persistent\n+\/\/ data structure, this won't do. (This can only happen when the incoming update\n+\/\/ has higher priority than all the updates in the work-in-progress queue.)\n+\/\/\n+\/\/ To solve this, in the case where the incoming update needs to be inserted\n+\/\/ into two different positions, we'll make a clone of the update and insert\n+\/\/ each copy into a separate queue. This forks the list while maintaining a\n+\/\/ persistent stucture, because the update that is added to the work-in-progress\n+\/\/ is always added to the front of the list.\n+\/\/\n+\/\/ However, if incoming update is inserted into the same position of both lists,\n+\/\/ we shouldn't make a copy.\n+\n+function insertUpdate(fiber : Fiber, update : Update, methodName : ?string) : void {\n+ const queue1 = ensureUpdateQueue(fiber);\n+ const queue2 = fiber.alternate ? ensureUpdateQueue(fiber.alternate) : null;\n+\n+ \/\/ Warn if an update is scheduled from inside an updater function.\n+ if (__DEV__ && typeof methodName === 'string' && (queue1.isProcessing || (queue2 && queue2.isProcessing))) {\n+ if (methodName === 'setState') {\n+ console.error(\n+ 'setState was called from inside the updater function of another' +\n+ 'setState. A function passed as the first argument of setState ' +\n+ 'should not contain any side-effects. Return a partial state object ' +\n+ 'instead of calling setState again. Example: ' +\n+ 'this.setState(function(state) { return { count: state.count + 1 }; })'\n+ );\n+ } else {\n+ console.error(\n+ `${methodName} was called from inside the updater function of ` +\n+ 'setState. A function passed as the first argument of setState ' +\n+ 'should not contain any side-effects.'\n+ );\n+ }\n+ }\n+\n+ const priorityLevel = update.priorityLevel;\n+\n+ let queue = queue1;\n+ let insertAfter1;\n+ let insertBefore1;\n+ let insertAfter2;\n+ let insertBefore2;\n+ for (let i = 0; queue && i < 2; i++) {\n+ let insertAfter = null;\n+ let insertBefore = null;\n+ if (queue.last && comparePriority(queue.last.priorityLevel, priorityLevel) <= 0) {\n+ \/\/ Fast path for the common case where the update should be inserted at\n+ \/\/ the end of the queue.\n+ insertAfter = queue.last;\n+ } else {\n+ insertBefore = queue.first;\n+ while (insertBefore && comparePriority(insertBefore.priorityLevel, priorityLevel) <= 0) {\n+ insertAfter = insertBefore;\n+ insertBefore = insertBefore.next;\n+ }\n+ }\n+ if (i === 0) {\n+ insertAfter1 = insertAfter;\n+ insertBefore1 = insertBefore;\n+ queue = queue2;\n+ } else {\n+ insertAfter2 = insertAfter;\n+ insertBefore2 = insertBefore;\n+ queue = null;\n+ }\n+ }\n+\n+ const update1 = update;\n+ insertUpdateIntoQueue(queue1, update1, insertAfter1, insertBefore1);\n+\n+ if (queue2) {\n+ let update2;\n+ if (insertBefore1 === insertBefore2) {\n+ \/\/ The update is inserted into the same position of both lists. There's no\n+ \/\/ need to clone the update.\n+ update2 = update1;\n+ } else {\n+ \/\/ The update is inserted into two separate positions. Make a clone of the\n+ \/\/ update and insert it twice. One or the other will be dropped the next\n+ \/\/ time we commit.\n+ update2 = cloneUpdate(update1);\n+ }\n+ insertUpdateIntoQueue(queue2, update2, insertAfter2, insertBefore2);\n+ }\n+}\n+\n+function addUpdate(\n+ fiber : Fiber,\n+ partialState : PartialState<any, any> | null,\n+ priorityLevel : PriorityLevel\n+) : void {\n+ const update = {\n+ priorityLevel,\n partialState,\n callback: null,\n isReplace: false,\n+ isForced: false,\n next: null,\n+ };\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'setState');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n+}\n+exports.addUpdate = addUpdate;\n+\n+function addReplaceUpdate(\n+ fiber : Fiber,\n+ state : any | null,\n+ priorityLevel : PriorityLevel\n+) : void {\n+ const update = {\n+ priorityLevel,\n+ partialState: state,\n+ callback: null,\n+ isReplace: true,\n isForced: false,\n- hasUpdate: partialState != null,\n- hasCallback: false,\n- tail: (null : any),\n+ next: null,\n };\n- queue.tail = queue;\n- return queue;\n-};\n \n-function addToQueue(queue : UpdateQueue, partialState : mixed) : UpdateQueue {\n- const node = {\n- partialState,\n+ \/\/ Drop all updates with equal priority\n+ let queue = ensureUpdateQueue(fiber);\n+ for (let i = 0; queue && i < 2; i++) {\n+ let replaceAfter = null;\n+ let replaceBefore = queue.first;\n+ let comparison = 255;\n+ while (replaceBefore &&\n+ (comparison = comparePriority(replaceBefore.priorityLevel, priorityLevel)) <= 0) {\n+ if (comparison < 0) {\n+ replaceAfter = replaceBefore;\n+ }\n+ replaceBefore = replaceBefore.next;\n+ }\n+\n+ if (replaceAfter) {\n+ replaceAfter.next = replaceBefore;\n+ } else {\n+ queue.first = replaceBefore;\n+ }\n+\n+ if (!replaceBefore) {\n+ queue.last = replaceAfter;\n+ }\n+\n+ if (fiber.alternate) {\n+ queue = ensureUpdateQueue(fiber.alternate);\n+ } else {\n+ queue = null;\n+ }\n+ }\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'replaceState');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n+}\n+exports.addReplaceUpdate = addReplaceUpdate;\n+\n+function addForceUpdate(fiber : Fiber, priorityLevel : PriorityLevel) : void {\n+ const update = {\n+ priorityLevel,\n+ partialState: null,\n callback: null,\n isReplace: false,\n+ isForced: true,\n next: null,\n };\n- queue.tail.next = node;\n- queue.tail = node;\n- queue.hasUpdate = queue.hasUpdate || (partialState != null);\n- return queue;\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'forceUpdate');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n }\n+exports.addForceUpdate = addForceUpdate;\n+\n \n-exports.addToQueue = addToQueue;\n+function addCallback(fiber : Fiber, callback: Callback, priorityLevel : PriorityLevel) : void {\n+ const update : Update = {\n+ priorityLevel,\n+ partialState: null,\n+ callback,\n+ isReplace: false,\n+ isForced: false,\n+ next: null,\n+ };\n+ insertUpdate(fiber, update);\n+}\n+exports.addCallback = addCallback;\n \n-exports.addCallbackToQueue = function(queue : UpdateQueue, callback: Function) : UpdateQueue {\n- if (queue.tail.callback) {\n- \/\/ If the tail already as a callback, add an empty node to queue\n- addToQueue(queue, null);\n+function getPendingPriority(queue : UpdateQueue) : PriorityLevel {\n+ return queue.first ? queue.first.priorityLevel : NoWork;\n+}\n+exports.getPendingPriority = getPendingPriority;\n+\n+function getStateFromUpdate(update, instance, prevState, props) {\n+ const partialState = update.partialState;\n+ if (typeof partialState === 'function') {\n+ const updateFn = partialState;\n+ return updateFn.call(instance, prevState, props);\n+ } else {\n+ return partialState;\n }\n- queue.tail.callback = callback;\n- queue.hasCallback = true;\n- return queue;\n-};\n+}\n+\n+function beginUpdateQueue(\n+ workInProgress : Fiber,\n+ queue : UpdateQueue,\n+ instance : any,\n+ prevState : any,\n+ props : any,\n+ priorityLevel : PriorityLevel\n+) : any {\n+ if (__DEV__) {\n+ \/\/ Set this flag so we can warn if setState is called inside the update\n+ \/\/ function of another setState.\n+ queue.isProcessing = true;\n+ }\n+\n+ queue.hasForceUpdate = false;\n+\n+ \/\/ Applies updates with matching priority to the previous state to create\n+ \/\/ a new state object.\n+ let state = prevState;\n+ let dontMutatePrevState = true;\n+ let isEmpty = true;\n+ let callbackList = null;\n+ let update = queue.first;\n+ while (update && comparePriority(update.priorityLevel, priorityLevel) <= 0) {\n+ \/\/ Remove each update from the queue right before it is processed. That way\n+ \/\/ if setState is called from inside an updater function, the new update\n+ \/\/ will be inserted in the correct position.\n+ queue.first = update.next;\n+ if (!queue.first) {\n+ queue.last = null;\n+ }\n \n-exports.callCallbacks = function(queue : UpdateQueue, context : any) {\n- let node : ?UpdateQueueNode = queue;\n- while (node) {\n- const callback = node.callback;\n- if (callback) {\n- if (typeof context !== 'undefined') {\n- callback.call(context);\n+ let partialState;\n+ if (update.isReplace) {\n+ \/\/ A replace should drop all previous updates in the queue, so\n+ \/\/ use the original `prevState`, not the accumulated `state`\n+ state = getStateFromUpdate(update, instance, prevState, props);\n+ dontMutatePrevState = true;\n+ isEmpty = false;\n+ } else {\n+ partialState = getStateFromUpdate(update, instance, state, props);\n+ if (partialState) {\n+ if (dontMutatePrevState) {\n+ state = Object.assign({}, state, partialState);\n+ } else {\n+ state = Object.assign(state, partialState);\n+ }\n+ dontMutatePrevState = false;\n+ isEmpty = false;\n+ }\n+ }\n+ if (update.isForced) {\n+ queue.hasForceUpdate = true;\n+ }\n+ if (update.callback) {\n+ if (callbackList && callbackList.last) {\n+ callbackList.last.next = update;\n+ callbackList.last = update;\n } else {\n- callback();\n+ callbackList = {\n+ first: update,\n+ last: update,\n+ hasForceUpdate: false,\n+ };\n }\n+ workInProgress.effectTag |= CallbackEffect;\n }\n- node = node.next;\n+ update = update.next;\n }\n-};\n \n-function getStateFromNode(node, instance, state, props) {\n- if (typeof node.partialState === 'function') {\n- const updateFn = node.partialState;\n- return updateFn.call(instance, state, props);\n- } else {\n- return node.partialState;\n+ if (isEmpty) {\n+ \/\/ None of the updates contained state. Use the original state object.\n+ state = prevState;\n }\n-}\n \n-exports.mergeUpdateQueue = function(queue : UpdateQueue, instance : any, prevState : any, props : any) : any {\n- let node : ?UpdateQueueNode = queue;\n- if (queue.isReplace) {\n- \/\/ replaceState is always first in the queue.\n- prevState = getStateFromNode(queue, instance, prevState, props);\n- node = queue.next;\n- if (!node) {\n- \/\/ If there is no more work, we replace the raw object instead of cloning.\n- return prevState;\n- }\n+ if (!queue.first && !queue.hasForceUpdate) {\n+ \/\/ Queue is now empty\n+ workInProgress.updateQueue = null;\n }\n- let state = Object.assign({}, prevState);\n- while (node) {\n- let partialState = getStateFromNode(node, instance, state, props);\n- Object.assign(state, partialState);\n- node = node.next;\n+\n+ workInProgress.callbackList = callbackList;\n+ workInProgress.memoizedState = state;\n+\n+ if (__DEV__) {\n+ queue.isProcessing = false;\n }\n+\n return state;\n-};\n+}\n+exports.beginUpdateQueue = beginUpdateQueue;\n+\n+function commitCallbacks(finishedWork : Fiber, callbackList : UpdateQueue, context : mixed) {\n+ const stopAfter = callbackList.last;\n+ let update = callbackList.first;\n+ while (update) {\n+ const callback = update.callback;\n+ if (typeof callback === 'function') {\n+ callback.call(context);\n+ }\n+ if (update === stopAfter) {\n+ break;\n+ }\n+ update = update.next;\n+ }\n+ finishedWork.callbackList = null;\n+}\n+exports.commitCallbacks = commitCallbacks;\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\nnew file mode 100644\nindex 0000000000..1b6627e2ee\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n@@ -0,0 +1,354 @@\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+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+var React;\n+var ReactNoop;\n+\n+describe('ReactIncrementalUpdates', () => {\n+ beforeEach(() => {\n+ jest.resetModuleRegistry();\n+ React = require('React');\n+ ReactNoop = require('ReactNoop');\n+ });\n+\n+ it('applies updates in order of priority', () => {\n+ let state;\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ ReactNoop.performAnimationWork(() => {\n+ \/\/ Has Animation priority\n+ this.setState({ b: 'b' });\n+ this.setState({ c: 'c' });\n+ });\n+ \/\/ Has Task priority\n+ this.setState({ a: 'a' });\n+ }\n+ render() {\n+ state = this.state;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flushDeferredPri(25);\n+ expect(state).toEqual({ a: 'a' });\n+ ReactNoop.flush();\n+ expect(state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+ });\n+\n+ it('applies updates with equal priority in insertion order', () => {\n+ let state;\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ \/\/ All have Task priority\n+ this.setState({ a: 'a' });\n+ this.setState({ b: 'b' });\n+ this.setState({ c: 'c' });\n+ }\n+ render() {\n+ state = this.state;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ expect(state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+ });\n+\n+ it('only drops updates with equal or lesser priority when replaceState is called', () => {\n+ let instance;\n+ let ops = [];\n+ const Foo = React.createClass({\n+ getInitialState() {\n+ return {};\n+ },\n+ componentDidMount() {\n+ ops.push('componentDidMount');\n+ },\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ },\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ },\n+ });\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ instance.setState({ x: 'x' });\n+ instance.setState({ y: 'y' });\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState({ a: 'a' });\n+ instance.setState({ b: 'b' });\n+ });\n+ instance.replaceState({ c: 'c' });\n+ instance.setState({ d: 'd' });\n+\n+ ReactNoop.flushAnimationPri();\n+ \/\/ Even though a replaceState has been already scheduled, it hasn't been\n+ \/\/ flushed yet because it has low priority.\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+ expect(ops).toEqual([\n+ 'render',\n+ 'componentDidMount',\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+\n+ ops = [];\n+\n+ ReactNoop.flush();\n+ \/\/ Now the rest of the updates are flushed.\n+ expect(instance.state).toEqual({ c: 'c', d: 'd' });\n+ expect(ops).toEqual([\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ });\n+\n+ it('can abort an update, schedule additional updates, and resume', () => {\n+ let instance;\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ }\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ ops = [];\n+\n+ let progressedUpdates = [];\n+ function createUpdate(letter) {\n+ return () => {\n+ progressedUpdates.push(letter);\n+ return {\n+ [letter]: letter,\n+ };\n+ };\n+ }\n+\n+ instance.setState(createUpdate('a'));\n+ instance.setState(createUpdate('b'));\n+ instance.setState(createUpdate('c'));\n+\n+ \/\/ Do just enough work to begin the update but not enough to flush it\n+ ReactNoop.flushDeferredPri(15);\n+ \/\/ expect(ReactNoop.getChildren()).toEqual([span('')]);\n+ expect(ops).toEqual(['render']);\n+ expect(progressedUpdates).toEqual(['a', 'b', 'c']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+\n+ ops = [];\n+ progressedUpdates = [];\n+\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState(createUpdate('d'));\n+ instance.setState(createUpdate('e'));\n+ });\n+ instance.setState(createUpdate('g'));\n+\n+ ReactNoop.flushAnimationPri();\n+ expect(ops).toEqual([\n+ \/\/ Flushes animation work (d and e)\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ ops = [];\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ \/\/ Flushes deferred work (f and g)\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ expect(progressedUpdates).toEqual(['d', 'e', 'a', 'b', 'c', 'f', 'g']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' });\n+ });\n+\n+ it('can abort an update, schedule a replaceState, and resume', () => {\n+ let instance;\n+ let ops = [];\n+ const Foo = React.createClass({\n+ getInitialState() {\n+ return {};\n+ },\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ },\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return (\n+ <span prop={Object.keys(this.state).join('')} \/>\n+ );\n+ },\n+ });\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ ops = [];\n+\n+ let progressedUpdates = [];\n+ function createUpdate(letter) {\n+ return () => {\n+ progressedUpdates.push(letter);\n+ return {\n+ [letter]: letter,\n+ };\n+ };\n+ }\n+\n+ instance.setState(createUpdate('a'));\n+ instance.setState(createUpdate('b'));\n+ instance.setState(createUpdate('c'));\n+\n+ \/\/ Do just enough work to begin the update but not enough to flush it\n+ ReactNoop.flushDeferredPri(20);\n+ expect(ops).toEqual(['render']);\n+ expect(progressedUpdates).toEqual(['a', 'b', 'c']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+\n+ ops = [];\n+ progressedUpdates = [];\n+\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState(createUpdate('d'));\n+ instance.replaceState(createUpdate('e'));\n+ });\n+ instance.setState(createUpdate('g'));\n+\n+ ReactNoop.flush();\n+ \/\/ Ensure that updater function d is never called.\n+ expect(progressedUpdates).toEqual(['e', 'f', 'g']);\n+ expect(instance.state).toEqual({ e: 'e', f: 'f', g: 'g' });\n+ });\n+\n+ it('does not call callbacks that are scheduled by another callback until a later commit', () => {\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ ops.push('did mount');\n+ this.setState({ a: 'a' }, () => {\n+ ops.push('callback a');\n+ this.setState({ b: 'b' }, () => {\n+ ops.push('callback b');\n+ });\n+ });\n+ }\n+ render() {\n+ ops.push('render');\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ 'render',\n+ 'did mount',\n+ 'render',\n+ 'callback a',\n+ 'render',\n+ 'callback b',\n+ ]);\n+ });\n+\n+ it('gives setState during reconciliation the same priority as whatever level is currently reconciling', () => {\n+ let instance;\n+ let ops = [];\n+\n+ class Foo extends React.Component {\n+ state = {};\n+ componentWillReceiveProps() {\n+ ops.push('componentWillReceiveProps');\n+ this.setState({ b: 'b' });\n+ }\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ ops = [];\n+\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState({ a: 'a' });\n+ ReactNoop.render(<Foo \/>); \/\/ Trigger componentWillReceiveProps\n+ });\n+ ReactNoop.flush();\n+\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+ expect(ops).toEqual([\n+ 'componentWillReceiveProps',\n+ 'render',\n+ ]);\n+ });\n+\n+\n+ it('enqueues setState inside an updater function as if the in-progress update is progressed (and warns)', () => {\n+ spyOn(console, 'error');\n+ let instance;\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ instance.setState(function a() {\n+ ops.push('setState updater');\n+ this.setState({ b: 'b' });\n+ return { a: 'a' };\n+ });\n+\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ \/\/ Initial render\n+ 'render',\n+ 'setState updater',\n+ \/\/ Update b is enqueued with the same priority as update a, so it should\n+ \/\/ be flushed in the same commit.\n+ 'render',\n+ ]);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+\n+ expectDev(console.error.calls.count()).toBe(1);\n+ console.error.calls.reset();\n+ });\n+});\n","files":[{"path":"examples\/fiber\/index.html","status":"M"},{"path":"scripts\/fiber\/tests-failing.txt","status":"M"},{"path":"scripts\/fiber\/tests-passing-except-dev.txt","status":"M"},{"path":"scripts\/fiber\/tests-passing.txt","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"M"},{"path":"src\/renderers\/noop\/ReactNoop.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\/ReactFiberClassComponent.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberRoot.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js","status":"A"}]}</article></body></html>

{"parents":["e36b38c1cad22f7dff557736cf4b0280106e937e","b8441ba955e08f5ad0595625e233d28c04a77867"],"body":"[Fiber] Separate priority for updates","commit":{"revision":"7fca464e7cf8a3e23d14dd5b9f5e8d1cef0116aa","subject":"Merge pull request #8538 from acdlite\/fiberupdatequeue","authoredAt":"2016-12-15T16:41:53-08:00","shortRevision":"7fca464e7c","authorName":"Andrew Clark","authorEmail":"acdlite@me.com"},"patch":"diff --git a\/examples\/fiber\/index.html b\/examples\/fiber\/index.html\nindex c90e7ce246..c965d2f781 100644\n--- a\/examples\/fiber\/index.html\n+++ b\/examples\/fiber\/index.html\n@@ -1,5 +1,5 @@\n \n-\n+\n \n \n Fiber Example<\/title>\n@@ -19,26 +19,154 @@\n <\/div>\n <script src=\"..\/..\/build\/react.js\"><\/script>\n <script src=\"..\/..\/build\/react-dom-fiber.js\"><\/script>\n- <script>\n- function ExampleApplication(props) {\n- var elapsed = Math.round(props.elapsed \/ 100);\n- var seconds = elapsed \/ 10 + (elapsed % 10 ? '' : '.0' );\n- var message =\n- 'React has been successfully running for ' + seconds + ' seconds.';\n-\n- return React.DOM.p(null, message);\n+ <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.24\/browser.min.js\"><\/script>\n+ <script type=\"text\/babel\">\n+ var dotStyle = {\n+ position: 'absolute',\n+ background: '#61dafb',\n+ font: 'normal 15px sans-serif',\n+ textAlign: 'center',\n+ cursor: 'pointer',\n+ };\n+\n+ var containerStyle = {\n+ position: 'absolute',\n+ transformOrigin: '0 0',\n+ left: '50%',\n+ top: '50%',\n+ width: '10px',\n+ height: '10px',\n+ background: '#eee',\n+ };\n+\n+ var targetSize = 25;\n+\n+ class Dot extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { hover: false };\n+ }\n+ enter() {\n+ this.setState({\n+ hover: true\n+ });\n+ }\n+ leave() {\n+ this.setState({\n+ hover: false\n+ });\n+ }\n+ render() {\n+ var props = this.props;\n+ var s = props.size * 1.3;\n+ var style = {\n+ ...dotStyle,\n+ width: s + 'px',\n+ height: s + 'px',\n+ left: (props.x) + 'px',\n+ top: (props.y) + 'px',\n+ borderRadius: (s \/ 2) + 'px',\n+ lineHeight: (s) + 'px',\n+ background: this.state.hover ? '#ff0' : dotStyle.background\n+ };\n+ return (\n+ <div style={style} onMouseEnter={() => this.enter()} onMouseLeave={() => this.leave()}>\n+ {this.state.hover ? '*' + props.text + '*' : props.text}\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ function SierpinskiTriangle({ x, y, s, children }) {\n+ if (s <= targetSize) {\n+ return (\n+ <Dot\n+ x={x - (targetSize \/ 2)}\n+ y={y - (targetSize \/ 2)}\n+ size={targetSize}\n+ text={children}\n+ \/>\n+ );\n+ return r;\n+ }\n+ var newSize = s \/ 2;\n+ var slowDown = false;\n+ if (slowDown) {\n+ var e = performance.now() + 0.8;\n+ while (performance.now() < e) {\n+ \/\/ Artificially long execution time.\n+ }\n+ }\n+\n+ s \/= 2;\n+\n+ return [\n+ <SierpinskiTriangle x={x} y={y - (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ <SierpinskiTriangle x={x - s} y={y + (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ <SierpinskiTriangle x={x + s} y={y + (s \/ 2)} s={s}>\n+ {children}\n+ <\/SierpinskiTriangle>,\n+ ];\n }\n+ SierpinskiTriangle.shouldComponentUpdate = function(oldProps, newProps) {\n+ var o = oldProps;\n+ var n = newProps;\n+ return !(\n+ o.x === n.x &&\n+ o.y === n.y &&\n+ o.s === n.s &&\n+ o.children === n.children\n+ );\n+ };\n \n- \/\/ Call React.createFactory instead of directly call ExampleApplication({...}) in React.render\n- var ExampleApplicationFactory = React.createFactory(ExampleApplication);\n+ class ExampleApplication extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { seconds: 0 };\n+ this.tick = this.tick.bind(this);\n+ }\n+ componentDidMount() {\n+ this.invervalID = setInterval(this.tick, 1000);\n+ }\n+ tick() {\n+ ReactDOMFiber.unstable_deferredUpdates(() =>\n+ this.setState(state => ({ seconds: (state.seconds % 10) + 1 }))\n+ );\n+ }\n+ componentWillUnmount() {\n+ clearInterval(this.intervalID);\n+ }\n+ render() {\n+ const seconds = this.state.seconds;\n+ const elapsed = this.props.elapsed;\n+ const t = (elapsed \/ 1000) % 10;\n+ const scale = 1 + (t > 5 ? 10 - t : t) \/ 10;\n+ const transform = 'scaleX(' + (scale \/ 2.1) + ') scaleY(0.7) translateZ(0.1px)';\n+ return (\n+ <div style={{ ...containerStyle, transform }}>\n+ <div>\n+ <SierpinskiTriangle x={0} y={0} s={1000}>\n+ {this.state.seconds}\n+ <\/SierpinskiTriangle>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ }\n \n var start = new Date().getTime();\n- setInterval(function() {\n+ function update() {\n ReactDOMFiber.render(\n- ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n+ <ExampleApplication elapsed={new Date().getTime() - start} \/>,\n document.getElementById('container')\n );\n- }, 50);\n+ requestAnimationFrame(update);\n+ }\n+ requestAnimationFrame(update);\n <\/script>\n <\/body>\n <\/html>\ndiff --git a\/scripts\/fiber\/tests-failing.txt b\/scripts\/fiber\/tests-failing.txt\nindex 034f765d97..da68b422e9 100644\n--- a\/scripts\/fiber\/tests-failing.txt\n+++ b\/scripts\/fiber\/tests-failing.txt\n@@ -71,13 +71,8 @@ src\/renderers\/shared\/shared\/__tests__\/ReactComponentLifeCycle-test.js\n * should carry through each of the phases of setup\n \n src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n-* should warn about `setState` in render\n-* should warn about `setState` in getChildContext\n * should update refs if shouldComponentUpdate gives false\n \n-src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponentState-test.js\n-* should update state when called from child cWRP\n-\n src\/renderers\/shared\/shared\/__tests__\/ReactEmptyComponent-test.js\n * should still throw when rendering to undefined\n * throws when rendering null at the top level\ndiff --git a\/scripts\/fiber\/tests-passing-except-dev.txt b\/scripts\/fiber\/tests-passing-except-dev.txt\nindex 6464c7d7ee..b112148a6e 100644\n--- a\/scripts\/fiber\/tests-passing-except-dev.txt\n+++ b\/scripts\/fiber\/tests-passing-except-dev.txt\n@@ -114,6 +114,8 @@ src\/renderers\/shared\/shared\/__tests__\/ReactComponentLifeCycle-test.js\n src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponent-test.js\n * should warn about `forceUpdate` on unmounted components\n * should warn about `setState` on unmounted components\n+* should warn about `setState` in render\n+* should warn about `setState` in getChildContext\n * should disallow nested render calls\n \n src\/renderers\/shared\/shared\/__tests__\/ReactMultiChild-test.js\ndiff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex 21a5783ffb..5b821222ca 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -1230,6 +1230,16 @@ src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n * invokes ref callbacks after insertion\/update\/unmount\n * supports string refs\n \n+src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n+* applies updates in order of priority\n+* applies updates with equal priority in insertion order\n+* only drops updates with equal or lesser priority when replaceState is called\n+* can abort an update, schedule additional updates, and resume\n+* can abort an update, schedule a replaceState, and resume\n+* does not call callbacks that are scheduled by another callback until a later commit\n+* gives setState during reconciliation the same priority as whatever level is currently reconciling\n+* enqueues setState inside an updater function as if the in-progress update is progressed (and warns)\n+\n src\/renderers\/shared\/fiber\/__tests__\/ReactTopLevelFragment-test.js\n * should render a simple fragment at the top of a component\n * should preserve state when switching from a single child\n@@ -1382,6 +1392,7 @@ src\/renderers\/shared\/shared\/__tests__\/ReactCompositeComponentState-test.js\n * should support setting state\n * should call componentDidUpdate of children first\n * should batch unmounts\n+* should update state when called from child cWRP\n \n src\/renderers\/shared\/shared\/__tests__\/ReactEmptyComponent-test.js\n * should not produce child DOM nodes for null and false\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex 4c38e66f6b..19c29643f3 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -242,6 +242,8 @@ var ReactDOM = {\n \n unstable_batchedUpdates: ReactGenericBatching.batchedUpdates,\n \n+ unstable_deferredUpdates: DOMRenderer.deferredUpdates,\n+\n };\n \n module.exports = ReactDOM;\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex d16b6e7bf2..946be9f3b4 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -284,17 +284,20 @@ var ReactNoop = {\n \n function logUpdateQueue(updateQueue : UpdateQueue, depth) {\n log(\n- ' '.repeat(depth + 1) + 'QUEUED UPDATES',\n- updateQueue.isReplace ? 'is replace' : '',\n- updateQueue.isForced ? 'is forced' : ''\n+ ' '.repeat(depth + 1) + 'QUEUED UPDATES'\n );\n+ const firstUpdate = updateQueue.first;\n+ if (!firstUpdate) {\n+ return;\n+ }\n+\n log(\n ' '.repeat(depth + 1) + '~',\n- updateQueue.partialState,\n- updateQueue.callback ? 'with callback' : ''\n+ firstUpdate && firstUpdate.partialState,\n+ firstUpdate.callback ? 'with callback' : ''\n );\n var next;\n- while (next = updateQueue.next) {\n+ while (next = firstUpdate.next) {\n log(\n ' '.repeat(depth + 1) + '~',\n next.partialState,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 8873e2b46c..3b9a88fa88 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -43,6 +43,10 @@ var {\n NoEffect,\n } = require('ReactTypeOfSideEffect');\n \n+var {\n+ cloneUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n+\n var invariant = require('invariant');\n \n \/\/ A Fiber is work on a Component that needs to be done or was done. There can\n@@ -100,12 +104,13 @@ export type Fiber = {\n pendingProps: any, \/\/ This type will be more specific once we overload the tag.\n \/\/ TODO: I think that there is a way to merge pendingProps and memoizedProps.\n memoizedProps: any, \/\/ The props used to create the output.\n- \/\/ A queue of local state updates.\n- updateQueue: ?UpdateQueue,\n- \/\/ The state used to create the output. This is a full state object.\n+\n+ \/\/ A queue of state updates and callbacks.\n+ updateQueue: UpdateQueue | null,\n+ \/\/ A list of callbacks that should be called during the next commit.\n+ callbackList: UpdateQueue | null,\n+ \/\/ The state used to create the output\n memoizedState: any,\n- \/\/ Linked list of callbacks to call after updates are committed.\n- callbackList: ?UpdateQueue,\n \n \/\/ Effect\n effectTag: TypeOfSideEffect,\n@@ -194,8 +199,8 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n pendingProps: null,\n memoizedProps: null,\n updateQueue: null,\n- memoizedState: null,\n callbackList: null,\n+ memoizedState: null,\n \n effectTag: NoEffect,\n nextEffect: null,\n@@ -270,8 +275,7 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n \/\/ pendingProps is here for symmetry but is unnecessary in practice for now.\n \/\/ TODO: Pass in the new pendingProps as an argument maybe?\n alt.pendingProps = fiber.pendingProps;\n- alt.updateQueue = fiber.updateQueue;\n- alt.callbackList = fiber.callbackList;\n+ cloneUpdateQueue(alt, fiber);\n alt.pendingWorkPriority = priorityLevel;\n \n alt.memoizedProps = fiber.memoizedProps;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\nindex bc98949e6f..94799919b9 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -25,7 +25,10 @@ var {\n reconcileChildFibersInPlace,\n cloneChildFibers,\n } = require('ReactChildFiber');\n-\n+var {\n+ hasPendingUpdate,\n+ beginUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n getMaskedContext,\n@@ -53,6 +56,7 @@ var {\n OffscreenPriority,\n } = require('ReactPriorityLevel');\n var {\n+ Update,\n Placement,\n ContentReset,\n Err,\n@@ -67,7 +71,10 @@ if (__DEV__) {\n module.exports = function<T, P, I, TI, C, CX>(\n config : HostConfig<T, P, I, TI, C, CX>,\n hostContext : HostContext<C, CX>,\n- scheduleUpdate : (fiber: Fiber) => void\n+ scheduleSetState: (fiber : Fiber, partialState : any) => void,\n+ scheduleReplaceState: (fiber : Fiber, state : any) => void,\n+ scheduleForceUpdate: (fiber : Fiber) => void,\n+ scheduleUpdateCallback: (fiber : Fiber, callback : Function) => void,\n ) {\n \n const { shouldSetTextContent } = config;\n@@ -84,7 +91,12 @@ module.exports = function<T, P, I, TI, C, CX>(\n mountClassInstance,\n resumeMountClassInstance,\n updateClassInstance,\n- } = ReactFiberClassComponent(scheduleUpdate);\n+ } = ReactFiberClassComponent(\n+ scheduleSetState,\n+ scheduleReplaceState,\n+ scheduleForceUpdate,\n+ scheduleUpdateCallback\n+ );\n \n function markChildAsProgressed(current, workInProgress, priorityLevel) {\n \/\/ We now have clones. Let's store them as the currently progressed work.\n@@ -195,24 +207,38 @@ module.exports = function<T, P, I, TI, C, CX>(\n return workInProgress.child;\n }\n \n- function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {\n+ function updateClassComponent(current : ?Fiber, workInProgress : Fiber, priorityLevel : PriorityLevel) {\n let shouldUpdate;\n if (!current) {\n if (!workInProgress.stateNode) {\n \/\/ In the initial pass we might need to construct the instance.\n constructClassInstance(workInProgress);\n- mountClassInstance(workInProgress);\n+ mountClassInstance(workInProgress, priorityLevel);\n shouldUpdate = true;\n } else {\n \/\/ In a resume, we'll already have an instance we can reuse.\n- shouldUpdate = resumeMountClassInstance(workInProgress);\n+ shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);\n }\n } else {\n- shouldUpdate = updateClassInstance(current, workInProgress);\n+ shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);\n }\n- if (!shouldUpdate) {\n+\n+ \/\/ Schedule side-effects\n+ if (shouldUpdate) {\n+ workInProgress.effectTag |= Update;\n+ } else {\n+ \/\/ If an update was already in progress, we should schedule an Update\n+ \/\/ effect even though we're bailing out, so that cWU\/cDU are called.\n+ if (current) {\n+ const instance = current.stateNode;\n+ if (instance.props !== current.memoizedProps ||\n+ instance.state !== current.memoizedState) {\n+ workInProgress.effectTag |= Update;\n+ }\n+ }\n return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n+\n \/\/ Rerender\n const instance = workInProgress.stateNode;\n ReactCurrentOwner.current = workInProgress;\n@@ -287,7 +313,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n }\n }\n \n- function mountIndeterminateComponent(current, workInProgress) {\n+ function mountIndeterminateComponent(current, workInProgress, priorityLevel) {\n if (current) {\n throw new Error('An indeterminate component should never have mounted.');\n }\n@@ -308,7 +334,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n \/\/ Proceed under the assumption that this is a class instance\n workInProgress.tag = ClassComponent;\n adoptClassInstance(workInProgress, value);\n- mountClassInstance(workInProgress);\n+ mountClassInstance(workInProgress, priorityLevel);\n ReactCurrentOwner.current = workInProgress;\n value = value.render();\n } else {\n@@ -471,22 +497,31 @@ module.exports = function<T, P, I, TI, C, CX>(\n workInProgress.child = workInProgress.progressedChild;\n }\n \n- if ((workInProgress.pendingProps === null || (\n- workInProgress.memoizedProps !== null &&\n- workInProgress.pendingProps === workInProgress.memoizedProps\n- )) &&\n- workInProgress.updateQueue === null &&\n- !hasContextChanged()) {\n- return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ const pendingProps = workInProgress.pendingProps;\n+ const memoizedProps = workInProgress.memoizedProps;\n+ const updateQueue = workInProgress.updateQueue;\n+\n+ \/\/ This is kept as a single expression to take advantage of short-circuiting.\n+ const hasNewProps = (\n+ pendingProps !== null && ( \/\/ hasPendingProps && (\n+ memoizedProps === null || \/\/ hasNoMemoizedProps ||\n+ pendingProps !== memoizedProps \/\/ memoizedPropsDontMatch\n+ ) \/\/ )\n+ );\n+ if (!hasNewProps) {\n+ const hasUpdate = updateQueue && hasPendingUpdate(updateQueue, priorityLevel);\n+ if (!hasUpdate && !hasContextChanged()) {\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress);\n+ }\n }\n \n switch (workInProgress.tag) {\n case IndeterminateComponent:\n- return mountIndeterminateComponent(current, workInProgress);\n+ return mountIndeterminateComponent(current, workInProgress, priorityLevel);\n case FunctionalComponent:\n return updateFunctionalComponent(current, workInProgress);\n case ClassComponent:\n- return updateClassComponent(current, workInProgress);\n+ return updateClassComponent(current, workInProgress, priorityLevel);\n case HostRoot: {\n const root = (workInProgress.stateNode : FiberRoot);\n if (root.pendingContext) {\n@@ -497,8 +532,14 @@ module.exports = function<T, P, I, TI, C, CX>(\n } else {\n pushTopLevelContextObject(root.context, false);\n }\n+\n+ if (updateQueue) {\n+ beginUpdateQueue(workInProgress, updateQueue, null, null, null, priorityLevel);\n+ }\n+\n pushHostContainer(workInProgress.stateNode.containerInfo);\n- reconcileChildren(current, workInProgress, workInProgress.pendingProps);\n+ reconcileChildren(current, workInProgress, pendingProps);\n+\n \/\/ A yield component is just a placeholder, we can just run through the\n \/\/ next one immediately.\n return workInProgress.child;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\nindex 79595dd152..3772571f8d 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberClassComponent.js\n@@ -13,17 +13,15 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n-import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n \n var {\n getMaskedContext,\n } = require('ReactFiberContext');\n var {\n- createUpdateQueue,\n- addToQueue,\n- addCallbackToQueue,\n- mergeUpdateQueue,\n+ beginUpdateQueue,\n } = require('ReactFiberUpdateQueue');\n+var { hasContextChanged } = require('ReactFiberContext');\n var { getComponentName, isMounted } = require('ReactFiberTreeReflection');\n var ReactInstanceMap = require('ReactInstanceMap');\n var shallowEqual = require('shallowEqual');\n@@ -32,53 +30,37 @@ var invariant = require('invariant');\n \n const isArray = Array.isArray;\n \n-module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n-\n- function scheduleUpdateQueue(fiber: Fiber, updateQueue: UpdateQueue) {\n- fiber.updateQueue = updateQueue;\n- \/\/ Schedule update on the alternate as well, since we don't know which tree\n- \/\/ is current.\n- if (fiber.alternate) {\n- fiber.alternate.updateQueue = updateQueue;\n- }\n- scheduleUpdate(fiber);\n- }\n+module.exports = function(\n+ scheduleSetState: (fiber : Fiber, partialState : any) => void,\n+ scheduleReplaceState: (fiber : Fiber, state : any) => void,\n+ scheduleForceUpdate: (fiber : Fiber) => void,\n+ scheduleUpdateCallback: (fiber : Fiber, callback : Function) => void,\n+) {\n \n \/\/ Class component state updater\n const updater = {\n isMounted,\n enqueueSetState(instance, partialState) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = fiber.updateQueue ?\n- addToQueue(fiber.updateQueue, partialState) :\n- createUpdateQueue(partialState);\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleSetState(fiber, partialState);\n },\n enqueueReplaceState(instance, state) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = createUpdateQueue(state);\n- updateQueue.isReplace = true;\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleReplaceState(fiber, state);\n },\n enqueueForceUpdate(instance) {\n const fiber = ReactInstanceMap.get(instance);\n- const updateQueue = fiber.updateQueue || createUpdateQueue(null);\n- updateQueue.isForced = true;\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleForceUpdate(fiber);\n },\n enqueueCallback(instance, callback) {\n const fiber = ReactInstanceMap.get(instance);\n- let updateQueue = fiber.updateQueue ?\n- fiber.updateQueue :\n- createUpdateQueue(null);\n- addCallbackToQueue(updateQueue, callback);\n- scheduleUpdateQueue(fiber, updateQueue);\n+ scheduleUpdateCallback(fiber, callback);\n },\n };\n \n function checkShouldComponentUpdate(workInProgress, oldProps, newProps, newState, newContext) {\n- const updateQueue = workInProgress.updateQueue;\n- if (oldProps === null || (updateQueue && updateQueue.isForced)) {\n+ if (oldProps === null || (workInProgress.updateQueue && workInProgress.updateQueue.hasForceUpdate)) {\n+ \/\/ If the workInProgress already has an Update effect, return true\n return true;\n }\n \n@@ -226,7 +208,7 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n }\n \n \/\/ Invokes the mount life-cycles on a previously never rendered instance.\n- function mountClassInstance(workInProgress : Fiber) : void {\n+ function mountClassInstance(workInProgress : Fiber, priorityLevel : PriorityLevel) : void {\n const instance = workInProgress.stateNode;\n const state = instance.state || null;\n \n@@ -245,14 +227,21 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ process them now.\n const updateQueue = workInProgress.updateQueue;\n if (updateQueue) {\n- instance.state = mergeUpdateQueue(updateQueue, instance, state, props);\n+ instance.state = beginUpdateQueue(\n+ workInProgress,\n+ updateQueue,\n+ instance,\n+ state,\n+ props,\n+ priorityLevel\n+ );\n }\n }\n }\n \n \/\/ Called on a preexisting class instance. Returns false if a resumed render\n \/\/ could be reused.\n- function resumeMountClassInstance(workInProgress : Fiber) : boolean {\n+ function resumeMountClassInstance(workInProgress : Fiber, priorityLevel : PriorityLevel) : boolean {\n let newState = workInProgress.memoizedState;\n let newProps = workInProgress.pendingProps;\n if (!newProps) {\n@@ -294,13 +283,20 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ during initial mounting.\n const newUpdateQueue = workInProgress.updateQueue;\n if (newUpdateQueue) {\n- newInstance.state = mergeUpdateQueue(newUpdateQueue, newInstance, newState, newProps);\n+ newInstance.state = beginUpdateQueue(\n+ workInProgress,\n+ newUpdateQueue,\n+ newInstance,\n+ newState,\n+ newProps,\n+ priorityLevel\n+ );\n }\n return true;\n }\n \n \/\/ Invokes the update life-cycles and returns false if it shouldn't rerender.\n- function updateClassInstance(current : Fiber, workInProgress : Fiber) : boolean {\n+ function updateClassInstance(current : Fiber, workInProgress : Fiber, priorityLevel : PriorityLevel) : boolean {\n const instance = workInProgress.stateNode;\n \n const oldProps = workInProgress.memoizedProps || current.memoizedProps;\n@@ -332,19 +328,22 @@ module.exports = function(scheduleUpdate : (fiber: Fiber) => void) {\n \/\/ TODO: Previous state can be null.\n let newState;\n if (updateQueue) {\n- if (!updateQueue.hasUpdate) {\n- newState = oldState;\n- } else {\n- newState = mergeUpdateQueue(updateQueue, instance, oldState, newProps);\n- }\n+ newState = beginUpdateQueue(\n+ workInProgress,\n+ updateQueue,\n+ instance,\n+ oldState,\n+ newProps,\n+ priorityLevel\n+ );\n } else {\n newState = oldState;\n }\n \n if (oldProps === newProps &&\n oldState === newState &&\n- oldContext === newContext &&\n- updateQueue && !updateQueue.isForced) {\n+ !hasContextChanged() &&\n+ !(updateQueue && updateQueue.hasForceUpdate)) {\n return false;\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 5ff31e2d51..879fcf2485 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -25,12 +25,11 @@ var {\n HostPortal,\n CoroutineComponent,\n } = ReactTypeOfWork;\n-var { callCallbacks } = require('ReactFiberUpdateQueue');\n+var { commitCallbacks } = require('ReactFiberUpdateQueue');\n \n var {\n Placement,\n Update,\n- Callback,\n ContentReset,\n } = require('ReactTypeOfSideEffect');\n \n@@ -418,25 +417,17 @@ module.exports = function<T, P, I, TI, C, CX>(\n }\n attachRef(current, finishedWork, instance);\n }\n- \/\/ Clear updates from current fiber.\n- if (finishedWork.alternate) {\n- finishedWork.alternate.updateQueue = null;\n- }\n- if (finishedWork.effectTag & Callback) {\n- if (finishedWork.callbackList) {\n- const callbackList = finishedWork.callbackList;\n- finishedWork.callbackList = null;\n- callCallbacks(callbackList, instance);\n- }\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\n case HostRoot: {\n- const rootFiber = finishedWork.stateNode;\n- if (rootFiber.callbackList) {\n- const callbackList = rootFiber.callbackList;\n- rootFiber.callbackList = null;\n- callCallbacks(callbackList, rootFiber.current.child.stateNode);\n+ const callbackList = finishedWork.callbackList;\n+ if (callbackList) {\n+ const instance = finishedWork.child && finishedWork.child.stateNode;\n+ commitCallbacks(finishedWork, callbackList, instance);\n }\n return;\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex d0a6ab217d..9c3a05501a 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -41,7 +41,6 @@ var {\n } = ReactTypeOfWork;\n var {\n Update,\n- Callback,\n } = ReactTypeOfSideEffect;\n \n if (__DEV__) {\n@@ -73,11 +72,6 @@ module.exports = function<T, P, I, TI, C, CX>(\n workInProgress.effectTag |= Update;\n }\n \n- function markCallback(workInProgress : Fiber) {\n- \/\/ Tag the fiber with a callback effect.\n- workInProgress.effectTag |= Callback;\n- }\n-\n function appendAllYields(yields : Array<ReifiedYield>, workInProgress : Fiber) {\n let node = workInProgress.child;\n while (node) {\n@@ -179,7 +173,7 @@ module.exports = function<T, P, I, TI, C, CX>(\n case FunctionalComponent:\n workInProgress.memoizedProps = workInProgress.pendingProps;\n return null;\n- case ClassComponent:\n+ case ClassComponent: {\n \/\/ We are leaving this subtree, so pop context if any.\n if (isContextProvider(workInProgress)) {\n popContextProvider();\n@@ -187,27 +181,13 @@ module.exports = function<T, P, I, TI, C, CX>(\n \/\/ Don't use the state queue to compute the memoized state. We already\n \/\/ merged it and assigned it to the instance. Transfer it from there.\n \/\/ Also need to transfer the props, because pendingProps will be null\n- \/\/ in the case of an update\n- const { state, props } = workInProgress.stateNode;\n- const updateQueue = workInProgress.updateQueue;\n- workInProgress.memoizedState = state;\n- workInProgress.memoizedProps = props;\n- if (current) {\n- if (current.memoizedProps !== workInProgress.memoizedProps ||\n- current.memoizedState !== workInProgress.memoizedState ||\n- updateQueue && updateQueue.isForced) {\n- markUpdate(workInProgress);\n- }\n- } else {\n- markUpdate(workInProgress);\n- }\n- if (updateQueue && updateQueue.hasCallback) {\n- \/\/ Transfer update queue to callbackList field so callbacks can be\n- \/\/ called during commit phase.\n- workInProgress.callbackList = updateQueue;\n- markCallback(workInProgress);\n- }\n+ \/\/ in the case of an update.\n+ const instance = workInProgress.stateNode;\n+ workInProgress.memoizedState = instance.state;\n+ workInProgress.memoizedProps = instance.props;\n+\n return null;\n+ }\n case HostRoot: {\n workInProgress.memoizedProps = workInProgress.pendingProps;\n const fiberRoot = (workInProgress.stateNode : FiberRoot);\n@@ -215,9 +195,6 @@ module.exports = function<T, P, I, TI, C, CX>(\n fiberRoot.context = fiberRoot.pendingContext;\n fiberRoot.pendingContext = null;\n }\n- \/\/ TODO: Only mark this as an update if we have any pending callbacks\n- \/\/ on it.\n- markUpdate(workInProgress);\n return null;\n }\n case HostComponent:\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex 582d7946e3..177fc674dc 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -24,8 +24,6 @@ var {\n var { createFiberRoot } = require('ReactFiberRoot');\n var ReactFiberScheduler = require('ReactFiberScheduler');\n \n-var { createUpdateQueue, addCallbackToQueue } = require('ReactFiberUpdateQueue');\n-\n if (__DEV__) {\n var ReactFiberInstrumentation = require('ReactFiberInstrumentation');\n }\n@@ -79,6 +77,7 @@ export type Reconciler<C, I, TI> = {\n \/\/ FIXME: ESLint complains about type parameter\n batchedUpdates<A>(fn : () => A) : A,\n syncUpdates<A>(fn : () => A) : A,\n+ deferredUpdates<A>(fn : () => A) : A,\n \/* eslint-enable no-undef *\/\n \n \/\/ Used to extract the return value from the initial render. Legacy API.\n@@ -99,9 +98,11 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n var {\n scheduleWork,\n+ scheduleUpdateCallback,\n performWithPriority,\n batchedUpdates,\n syncUpdates,\n+ deferredUpdates,\n } = ReactFiberScheduler(config);\n \n return {\n@@ -109,16 +110,19 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n mountContainer(element : ReactElement<any>, containerInfo : C, parentComponent : ?ReactComponent<any, any, any>, callback: ?Function) : OpaqueNode {\n const context = getContextForSubtree(parentComponent);\n const root = createFiberRoot(containerInfo, context);\n- const container = root.current;\n- if (callback) {\n- const queue = createUpdateQueue(null);\n- addCallbackToQueue(queue, callback);\n- root.callbackList = queue;\n- }\n- \/\/ TODO: Use pending work\/state instead of props.\n+ const current = root.current;\n+\n+ \/\/ TODO: Use the updateQueue and scheduleUpdate, instead of pendingProps.\n \/\/ TODO: This should not override the pendingWorkPriority if there is\n \/\/ higher priority work in the subtree.\n- container.pendingProps = element;\n+\n+ current.pendingProps = element;\n+ if (current.alternate) {\n+ current.alternate.pendingProps = element;\n+ }\n+ if (callback) {\n+ scheduleUpdateCallback(current, callback);\n+ }\n \n scheduleWork(root);\n \n@@ -129,24 +133,25 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\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 \/\/ of being roots.\n- return container;\n+ return current;\n },\n \n updateContainer(element : ReactElement<any>, container : OpaqueNode, parentComponent : ?ReactComponent<any, any, any>, callback: ?Function) : void {\n \/\/ TODO: If this is a nested container, this won't be the root.\n const root : FiberRoot = (container.stateNode : any);\n- if (callback) {\n- const queue = root.callbackList ?\n- root.callbackList :\n- createUpdateQueue(null);\n- addCallbackToQueue(queue, callback);\n- root.callbackList = queue;\n- }\n+ const current = root.current;\n+\n root.pendingContext = getContextForSubtree(parentComponent);\n- \/\/ TODO: Use pending work\/state instead of props.\n- root.current.pendingProps = element;\n- if (root.current.alternate) {\n- root.current.alternate.pendingProps = element;\n+\n+ \/\/ TODO: Use the updateQueue and scheduleUpdate, instead of pendingProps.\n+ \/\/ TODO: This should not override the pendingWorkPriority if there is\n+ \/\/ higher priority work in the subtree.\n+ current.pendingProps = element;\n+ if (current.alternate) {\n+ current.alternate.pendingProps = element;\n+ }\n+ if (callback) {\n+ scheduleUpdateCallback(current, callback);\n }\n \n scheduleWork(root);\n@@ -178,6 +183,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n syncUpdates,\n \n+ deferredUpdates,\n+\n getPublicRootInstance(container : OpaqueNode) : (ReactComponent<any, any, any> | I | TI | null) {\n const root : FiberRoot = (container.stateNode : any);\n const containerFiber = root.current;\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\nindex 4da3b9d18e..47ef945dab 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberRoot.js\n@@ -13,7 +13,6 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n-import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n \n const { createHostRootFiber } = require('ReactFiber');\n \n@@ -26,8 +25,6 @@ export type FiberRoot = {\n isScheduled: boolean,\n \/\/ The work schedule is a linked list.\n nextScheduledRoot: ?FiberRoot,\n- \/\/ Linked list of callbacks to call after updates are committed.\n- callbackList: ?UpdateQueue,\n \/\/ Top context object, used by renderSubtreeIntoContainer\n context: Object,\n pendingContext: ?Object,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 7bf2f7d7aa..88887082d6 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -53,6 +53,14 @@ var {\n ClassComponent,\n } = require('ReactTypeOfWork');\n \n+var {\n+ getPendingPriority,\n+ addUpdate,\n+ addReplaceUpdate,\n+ addForceUpdate,\n+ addCallback,\n+} = require('ReactFiberUpdateQueue');\n+\n var {\n unwindContext,\n } = require('ReactFiberContext');\n@@ -67,8 +75,14 @@ var timeHeuristicForUnitOfWork = 1;\n module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C, CX>) {\n const hostContext = ReactFiberHostContext(config);\n const { popHostContainer, popHostContext, resetHostContainer } = hostContext;\n- const { beginWork, beginFailedWork } =\n- ReactFiberBeginWork(config, hostContext, scheduleUpdate);\n+ const { beginWork, beginFailedWork } = ReactFiberBeginWork(\n+ config,\n+ hostContext,\n+ scheduleSetState,\n+ scheduleReplaceState,\n+ scheduleForceUpdate,\n+ scheduleUpdateCallback,\n+ );\n const { completeWork } = ReactFiberCompleteWork(config, hostContext);\n const {\n commitPlacement,\n@@ -85,10 +99,15 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n } = config;\n \n \/\/ The priority level to use when scheduling an update.\n+ \/\/ TODO: Should we change this to an array? Might be less confusing.\n let priorityContext : PriorityLevel = useSyncScheduling ?\n SynchronousPriority :\n LowPriority;\n \n+ \/\/ Keep track of this so we can reset the priority context if an error\n+ \/\/ is thrown during reconciliation.\n+ let priorityContextBeforeReconciliation : PriorityLevel = NoWork;\n+\n \/\/ Keeps track of whether we're currently in a work loop. Used to batch\n \/\/ nested updates.\n let isPerformingWork : boolean = false;\n@@ -139,6 +158,9 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ \/\/ findNextUnitOfWork mutates the current priority context. It is reset after\n+ \/\/ after the workLoop exits, so never call findNextUnitOfWork from outside\n+ \/\/ the work loop.\n function findNextUnitOfWork() {\n \/\/ Clear out roots with no more work on them, or if they have uncaught errors\n while (nextScheduledRoot && nextScheduledRoot.current.pendingWorkPriority === NoWork) {\n@@ -175,6 +197,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n if (highestPriorityRoot) {\n nextPriorityLevel = highestPriorityLevel;\n+ priorityContext = nextPriorityLevel;\n return cloneFiber(\n highestPriorityRoot.current,\n highestPriorityLevel\n@@ -199,7 +222,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \/\/ updates, and deletions. To avoid needing to add a case for every\n \/\/ possible bitmap value, we remove the secondary effects from the\n \/\/ effect tag and switch on that value.\n- let primaryEffectTag = nextEffect.effectTag & ~(Callback | Err | ContentReset);\n+ let primaryEffectTag =\n+ nextEffect.effectTag & ~(Callback | Err | ContentReset);\n switch (primaryEffectTag) {\n case Placement: {\n commitPlacement(nextEffect);\n@@ -355,7 +379,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \/\/ If we caught any errors during this commit, schedule their boundaries\n \/\/ to update.\n if (commitPhaseBoundaries) {\n- commitPhaseBoundaries.forEach(scheduleUpdate);\n+ commitPhaseBoundaries.forEach(scheduleErrorRecovery);\n commitPhaseBoundaries = null;\n }\n \n@@ -364,6 +388,14 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n \n function resetWorkPriority(workInProgress : Fiber) {\n let newPriority = NoWork;\n+\n+ \/\/ Check for pending update priority. This is usually null so it shouldn't\n+ \/\/ be a perf issue.\n+ const queue = workInProgress.updateQueue;\n+ if (queue) {\n+ newPriority = getPendingPriority(queue);\n+ }\n+\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@@ -392,7 +424,6 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\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- workInProgress.updateQueue = null;\n \n const returnFiber = workInProgress.return;\n const siblingFiber = workInProgress.sibling;\n@@ -459,6 +490,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \n function performUnitOfWork(workInProgress : Fiber) : ?Fiber {\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@@ -491,10 +523,13 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n ReactDebugCurrentFiber.current = null;\n }\n \n+\n+\n return next;\n }\n \n function performFailedUnitOfWork(workInProgress : Fiber) : ?Fiber {\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@@ -642,28 +677,25 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \n \/\/ Before starting any work, check to see if there are any pending\n- \/\/ commits from the previous frame. An exception is if we're flushing\n- \/\/ Task work in a deferred batch and the pending commit does not\n- \/\/ have Task priority.\n- if (pendingCommit) {\n- const isFlushingTaskWorkInDeferredBatch =\n- priorityLevel === TaskPriority &&\n- isPerformingDeferredWork &&\n- pendingCommit.pendingWorkPriority !== TaskPriority;\n- if (!isFlushingTaskWorkInDeferredBatch) {\n- commitAllWork(pendingCommit);\n- }\n+ \/\/ commits from the previous frame.\n+ if (pendingCommit && !deadlineHasExpired) {\n+ commitAllWork(pendingCommit);\n }\n \n \/\/ Nothing in performWork should be allowed to throw. All unsafe\n \/\/ operations must happen within workLoop, which is extracted to a\n \/\/ separate function so that it can be optimized by the JS engine.\n try {\n+ priorityContextBeforeReconciliation = priorityContext;\n+ priorityContext = nextPriorityLevel;\n deadlineHasExpired = workLoop(priorityLevel, deadline, deadlineHasExpired);\n } catch (error) {\n \/\/ We caught an error during either the begin or complete phases.\n const failedWork = nextUnitOfWork;\n \n+ \/\/ Reset the priority context to its value before reconcilation.\n+ priorityContext = priorityContextBeforeReconciliation;\n+\n \/\/ \"Capture\" the error by finding the nearest boundary. If there is no\n \/\/ error boundary, the nearest host container acts as one. If\n \/\/ captureError returns null, the error was intentionally ignored.\n@@ -691,6 +723,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n \/\/ Continue performing work\n continue;\n+ } finally {\n+ priorityContext = priorityContextBeforeReconciliation;\n }\n \n \/\/ Stop performing work\n@@ -828,11 +862,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n commitPhaseBoundaries.add(boundary);\n } else {\n- \/\/ Otherwise, schedule an update now. Error recovery has Task priority.\n- const previousPriorityContext = priorityContext;\n- priorityContext = TaskPriority;\n- scheduleUpdate(boundary);\n- priorityContext = previousPriorityContext;\n+ \/\/ Otherwise, schedule an update now.\n+ scheduleErrorRecovery(boundary);\n }\n return boundary;\n } else if (!firstUncaughtError) {\n@@ -982,8 +1013,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n- function scheduleUpdate(fiber : Fiber) {\n- let priorityLevel = priorityContext;\n+ function scheduleUpdateAtPriority(fiber : Fiber, priorityLevel : PriorityLevel) {\n \/\/ If we're in a batch, downgrade sync priority to task priority\n if (priorityLevel === SynchronousPriority && isPerformingWork) {\n priorityLevel = TaskPriority;\n@@ -1023,6 +1053,30 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ function scheduleErrorRecovery(fiber : Fiber) {\n+ scheduleUpdateAtPriority(fiber, TaskPriority);\n+ }\n+\n+ function scheduleSetState(fiber : Fiber, partialState : any) {\n+ addUpdate(fiber, partialState, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleReplaceState(fiber : Fiber, state : any) {\n+ addReplaceUpdate(fiber, state, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleForceUpdate(fiber : Fiber) {\n+ addForceUpdate(fiber, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n+ function scheduleUpdateCallback(fiber : Fiber, callback : Function) {\n+ addCallback(fiber, callback, priorityContext);\n+ scheduleUpdateAtPriority(fiber, priorityContext);\n+ }\n+\n function performWithPriority(priorityLevel : PriorityLevel, fn : Function) {\n const previousPriorityContext = priorityContext;\n priorityContext = priorityLevel;\n@@ -1059,10 +1113,22 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C\n }\n }\n \n+ function deferredUpdates<A>(fn : () => A) : A {\n+ const previousPriorityContext = priorityContext;\n+ priorityContext = LowPriority;\n+ try {\n+ return fn();\n+ } finally {\n+ priorityContext = previousPriorityContext;\n+ }\n+ }\n+\n return {\n scheduleWork: scheduleWork,\n+ scheduleUpdateCallback: scheduleUpdateCallback,\n performWithPriority: performWithPriority,\n batchedUpdates: batchedUpdates,\n syncUpdates: syncUpdates,\n+ deferredUpdates: deferredUpdates,\n };\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\nindex 5fe2eafdbe..50f8ceeb47 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\n@@ -12,100 +12,479 @@\n \n 'use strict';\n \n-type UpdateQueueNode = {\n- partialState: any,\n- callback: ?Function,\n+import type { Fiber } from 'ReactFiber';\n+import type { PriorityLevel } from 'ReactPriorityLevel';\n+\n+const {\n+ Callback: CallbackEffect,\n+} = require('ReactTypeOfSideEffect');\n+\n+const {\n+ NoWork,\n+ SynchronousPriority,\n+ TaskPriority,\n+} = require('ReactPriorityLevel');\n+\n+type PartialState<State, Props> =\n+ $Subtype<State> |\n+ (prevState: State, props: Props) => $Subtype<State>;\n+\n+type Callback = () => void;\n+\n+type Update = {\n+ priorityLevel: PriorityLevel,\n+ partialState: PartialState<any, any>,\n+ callback: Callback | null,\n isReplace: boolean,\n- next: ?UpdateQueueNode,\n+ isForced: boolean,\n+ next: Update | null,\n };\n \n-export type UpdateQueue = UpdateQueueNode & {\n- isForced: boolean,\n- hasUpdate: boolean,\n- hasCallback: boolean,\n- tail: UpdateQueueNode\n+\/\/ Singly linked-list of updates. When an update is scheduled, it is added to\n+\/\/ the queue of the current fiber and the work-in-progress fiber. The two queues\n+\/\/ are separate but they share a persistent structure.\n+\/\/\n+\/\/ During reconciliation, updates are removed from the work-in-progress fiber,\n+\/\/ but they remain on the current fiber. That ensures that if a work-in-progress\n+\/\/ is aborted, the aborted updates are recovered by cloning from current.\n+\/\/\n+\/\/ The work-in-progress queue is always a subset of the current queue.\n+\/\/\n+\/\/ When the tree is committed, the work-in-progress becomes the current.\n+export type UpdateQueue = {\n+ first: Update | null,\n+ last: Update | null,\n+ hasForceUpdate: boolean,\n+\n+ \/\/ Dev only\n+ isProcessing?: boolean,\n };\n \n-exports.createUpdateQueue = function(partialState : mixed) : UpdateQueue {\n- const queue = {\n+function comparePriority(a : PriorityLevel, b : PriorityLevel) : number {\n+ \/\/ When comparing update priorities, treat sync and Task work as equal.\n+ \/\/ TODO: Could we avoid the need for this by always coercing sync priority\n+ \/\/ to Task when scheduling an update?\n+ if ((a === TaskPriority || a === SynchronousPriority) &&\n+ (b === TaskPriority || b === SynchronousPriority)) {\n+ return 0;\n+ }\n+ if (a === NoWork && b !== NoWork) {\n+ return -255;\n+ }\n+ if (a !== NoWork && b === NoWork) {\n+ return 255;\n+ }\n+ return a - b;\n+}\n+\n+function hasPendingUpdate(queue : UpdateQueue, priorityLevel : PriorityLevel) : boolean {\n+ if (!queue.first) {\n+ return false;\n+ }\n+ \/\/ Return true if the first pending update has greater or equal priority.\n+ return comparePriority(queue.first.priorityLevel, priorityLevel) <= 0;\n+}\n+exports.hasPendingUpdate = hasPendingUpdate;\n+\n+\/\/ Ensures that a fiber has an update queue, creating a new one if needed.\n+\/\/ Returns the new or existing queue.\n+function ensureUpdateQueue(fiber : Fiber) : UpdateQueue {\n+ if (fiber.updateQueue) {\n+ \/\/ We already have an update queue.\n+ return fiber.updateQueue;\n+ }\n+\n+ let queue;\n+ if (__DEV__) {\n+ queue = {\n+ first: null,\n+ last: null,\n+ hasForceUpdate: false,\n+ isProcessing: false,\n+ };\n+ } else {\n+ queue = {\n+ first: null,\n+ last: null,\n+ hasForceUpdate: false,\n+ };\n+ }\n+\n+ fiber.updateQueue = queue;\n+ return queue;\n+}\n+\n+\/\/ Clones an update queue from a source fiber onto its alternate.\n+function cloneUpdateQueue(alt : Fiber, fiber : Fiber) : UpdateQueue | null {\n+ const sourceQueue = fiber.updateQueue;\n+ if (!sourceQueue) {\n+ \/\/ The source fiber does not have an update queue.\n+ alt.updateQueue = null;\n+ return null;\n+ }\n+ \/\/ If the alternate already has a queue, reuse the previous object.\n+ const altQueue = alt.updateQueue || {};\n+ altQueue.first = sourceQueue.first;\n+ altQueue.last = sourceQueue.last;\n+ altQueue.hasForceUpdate = sourceQueue.hasForceUpdate;\n+ alt.updateQueue = altQueue;\n+ return altQueue;\n+}\n+exports.cloneUpdateQueue = cloneUpdateQueue;\n+\n+function cloneUpdate(update : Update) : Update {\n+ return {\n+ priorityLevel: update.priorityLevel,\n+ partialState: update.partialState,\n+ callback: update.callback,\n+ isReplace: update.isReplace,\n+ isForced: update.isForced,\n+ next: null,\n+ };\n+}\n+\n+function insertUpdateIntoQueue(queue, update, insertAfter, insertBefore) {\n+ if (insertAfter) {\n+ insertAfter.next = update;\n+ } else {\n+ \/\/ This is the first item in the queue.\n+ update.next = queue.first;\n+ queue.first = update;\n+ }\n+\n+ if (insertBefore) {\n+ update.next = insertBefore;\n+ } else {\n+ \/\/ This is the last item in the queue.\n+ queue.last = update;\n+ }\n+}\n+\n+\/\/ The work-in-progress queue is a subset of the current queue (if it exists).\n+\/\/ We need to insert the incoming update into both lists. However, it's possible\n+\/\/ that the correct position in one list will be different from the position in\n+\/\/ the other. Consider the following case:\n+\/\/\n+\/\/ Current: 3-5-6\n+\/\/ Work-in-progress: 6\n+\/\/\n+\/\/ Then we receive an update with priority 4 and insert it into each list:\n+\/\/\n+\/\/ Current: 3-4-5-6\n+\/\/ Work-in-progress: 4-6\n+\/\/\n+\/\/ In the current queue, the new update's `next` pointer points to the update\n+\/\/ with priority 5. But in the work-in-progress queue, the pointer points to the\n+\/\/ update with priority 6. Because these two queues share the same persistent\n+\/\/ data structure, this won't do. (This can only happen when the incoming update\n+\/\/ has higher priority than all the updates in the work-in-progress queue.)\n+\/\/\n+\/\/ To solve this, in the case where the incoming update needs to be inserted\n+\/\/ into two different positions, we'll make a clone of the update and insert\n+\/\/ each copy into a separate queue. This forks the list while maintaining a\n+\/\/ persistent stucture, because the update that is added to the work-in-progress\n+\/\/ is always added to the front of the list.\n+\/\/\n+\/\/ However, if incoming update is inserted into the same position of both lists,\n+\/\/ we shouldn't make a copy.\n+\n+function insertUpdate(fiber : Fiber, update : Update, methodName : ?string) : void {\n+ const queue1 = ensureUpdateQueue(fiber);\n+ const queue2 = fiber.alternate ? ensureUpdateQueue(fiber.alternate) : null;\n+\n+ \/\/ Warn if an update is scheduled from inside an updater function.\n+ if (__DEV__ && typeof methodName === 'string' && (queue1.isProcessing || (queue2 && queue2.isProcessing))) {\n+ if (methodName === 'setState') {\n+ console.error(\n+ 'setState was called from inside the updater function of another' +\n+ 'setState. A function passed as the first argument of setState ' +\n+ 'should not contain any side-effects. Return a partial state object ' +\n+ 'instead of calling setState again. Example: ' +\n+ 'this.setState(function(state) { return { count: state.count + 1 }; })'\n+ );\n+ } else {\n+ console.error(\n+ `${methodName} was called from inside the updater function of ` +\n+ 'setState. A function passed as the first argument of setState ' +\n+ 'should not contain any side-effects.'\n+ );\n+ }\n+ }\n+\n+ const priorityLevel = update.priorityLevel;\n+\n+ let queue = queue1;\n+ let insertAfter1;\n+ let insertBefore1;\n+ let insertAfter2;\n+ let insertBefore2;\n+ for (let i = 0; queue && i < 2; i++) {\n+ let insertAfter = null;\n+ let insertBefore = null;\n+ if (queue.last && comparePriority(queue.last.priorityLevel, priorityLevel) <= 0) {\n+ \/\/ Fast path for the common case where the update should be inserted at\n+ \/\/ the end of the queue.\n+ insertAfter = queue.last;\n+ } else {\n+ insertBefore = queue.first;\n+ while (insertBefore && comparePriority(insertBefore.priorityLevel, priorityLevel) <= 0) {\n+ insertAfter = insertBefore;\n+ insertBefore = insertBefore.next;\n+ }\n+ }\n+ if (i === 0) {\n+ insertAfter1 = insertAfter;\n+ insertBefore1 = insertBefore;\n+ queue = queue2;\n+ } else {\n+ insertAfter2 = insertAfter;\n+ insertBefore2 = insertBefore;\n+ queue = null;\n+ }\n+ }\n+\n+ const update1 = update;\n+ insertUpdateIntoQueue(queue1, update1, insertAfter1, insertBefore1);\n+\n+ if (queue2) {\n+ let update2;\n+ if (insertBefore1 === insertBefore2) {\n+ \/\/ The update is inserted into the same position of both lists. There's no\n+ \/\/ need to clone the update.\n+ update2 = update1;\n+ } else {\n+ \/\/ The update is inserted into two separate positions. Make a clone of the\n+ \/\/ update and insert it twice. One or the other will be dropped the next\n+ \/\/ time we commit.\n+ update2 = cloneUpdate(update1);\n+ }\n+ insertUpdateIntoQueue(queue2, update2, insertAfter2, insertBefore2);\n+ }\n+}\n+\n+function addUpdate(\n+ fiber : Fiber,\n+ partialState : PartialState<any, any> | null,\n+ priorityLevel : PriorityLevel\n+) : void {\n+ const update = {\n+ priorityLevel,\n partialState,\n callback: null,\n isReplace: false,\n+ isForced: false,\n next: null,\n+ };\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'setState');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n+}\n+exports.addUpdate = addUpdate;\n+\n+function addReplaceUpdate(\n+ fiber : Fiber,\n+ state : any | null,\n+ priorityLevel : PriorityLevel\n+) : void {\n+ const update = {\n+ priorityLevel,\n+ partialState: state,\n+ callback: null,\n+ isReplace: true,\n isForced: false,\n- hasUpdate: partialState != null,\n- hasCallback: false,\n- tail: (null : any),\n+ next: null,\n };\n- queue.tail = queue;\n- return queue;\n-};\n \n-function addToQueue(queue : UpdateQueue, partialState : mixed) : UpdateQueue {\n- const node = {\n- partialState,\n+ \/\/ Drop all updates with equal priority\n+ let queue = ensureUpdateQueue(fiber);\n+ for (let i = 0; queue && i < 2; i++) {\n+ let replaceAfter = null;\n+ let replaceBefore = queue.first;\n+ let comparison = 255;\n+ while (replaceBefore &&\n+ (comparison = comparePriority(replaceBefore.priorityLevel, priorityLevel)) <= 0) {\n+ if (comparison < 0) {\n+ replaceAfter = replaceBefore;\n+ }\n+ replaceBefore = replaceBefore.next;\n+ }\n+\n+ if (replaceAfter) {\n+ replaceAfter.next = replaceBefore;\n+ } else {\n+ queue.first = replaceBefore;\n+ }\n+\n+ if (!replaceBefore) {\n+ queue.last = replaceAfter;\n+ }\n+\n+ if (fiber.alternate) {\n+ queue = ensureUpdateQueue(fiber.alternate);\n+ } else {\n+ queue = null;\n+ }\n+ }\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'replaceState');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n+}\n+exports.addReplaceUpdate = addReplaceUpdate;\n+\n+function addForceUpdate(fiber : Fiber, priorityLevel : PriorityLevel) : void {\n+ const update = {\n+ priorityLevel,\n+ partialState: null,\n callback: null,\n isReplace: false,\n+ isForced: true,\n next: null,\n };\n- queue.tail.next = node;\n- queue.tail = node;\n- queue.hasUpdate = queue.hasUpdate || (partialState != null);\n- return queue;\n+ if (__DEV__) {\n+ insertUpdate(fiber, update, 'forceUpdate');\n+ } else {\n+ insertUpdate(fiber, update);\n+ }\n }\n+exports.addForceUpdate = addForceUpdate;\n+\n \n-exports.addToQueue = addToQueue;\n+function addCallback(fiber : Fiber, callback: Callback, priorityLevel : PriorityLevel) : void {\n+ const update : Update = {\n+ priorityLevel,\n+ partialState: null,\n+ callback,\n+ isReplace: false,\n+ isForced: false,\n+ next: null,\n+ };\n+ insertUpdate(fiber, update);\n+}\n+exports.addCallback = addCallback;\n \n-exports.addCallbackToQueue = function(queue : UpdateQueue, callback: Function) : UpdateQueue {\n- if (queue.tail.callback) {\n- \/\/ If the tail already as a callback, add an empty node to queue\n- addToQueue(queue, null);\n+function getPendingPriority(queue : UpdateQueue) : PriorityLevel {\n+ return queue.first ? queue.first.priorityLevel : NoWork;\n+}\n+exports.getPendingPriority = getPendingPriority;\n+\n+function getStateFromUpdate(update, instance, prevState, props) {\n+ const partialState = update.partialState;\n+ if (typeof partialState === 'function') {\n+ const updateFn = partialState;\n+ return updateFn.call(instance, prevState, props);\n+ } else {\n+ return partialState;\n }\n- queue.tail.callback = callback;\n- queue.hasCallback = true;\n- return queue;\n-};\n+}\n+\n+function beginUpdateQueue(\n+ workInProgress : Fiber,\n+ queue : UpdateQueue,\n+ instance : any,\n+ prevState : any,\n+ props : any,\n+ priorityLevel : PriorityLevel\n+) : any {\n+ if (__DEV__) {\n+ \/\/ Set this flag so we can warn if setState is called inside the update\n+ \/\/ function of another setState.\n+ queue.isProcessing = true;\n+ }\n+\n+ queue.hasForceUpdate = false;\n+\n+ \/\/ Applies updates with matching priority to the previous state to create\n+ \/\/ a new state object.\n+ let state = prevState;\n+ let dontMutatePrevState = true;\n+ let isEmpty = true;\n+ let callbackList = null;\n+ let update = queue.first;\n+ while (update && comparePriority(update.priorityLevel, priorityLevel) <= 0) {\n+ \/\/ Remove each update from the queue right before it is processed. That way\n+ \/\/ if setState is called from inside an updater function, the new update\n+ \/\/ will be inserted in the correct position.\n+ queue.first = update.next;\n+ if (!queue.first) {\n+ queue.last = null;\n+ }\n \n-exports.callCallbacks = function(queue : UpdateQueue, context : any) {\n- let node : ?UpdateQueueNode = queue;\n- while (node) {\n- const callback = node.callback;\n- if (callback) {\n- if (typeof context !== 'undefined') {\n- callback.call(context);\n+ let partialState;\n+ if (update.isReplace) {\n+ \/\/ A replace should drop all previous updates in the queue, so\n+ \/\/ use the original `prevState`, not the accumulated `state`\n+ state = getStateFromUpdate(update, instance, prevState, props);\n+ dontMutatePrevState = true;\n+ isEmpty = false;\n+ } else {\n+ partialState = getStateFromUpdate(update, instance, state, props);\n+ if (partialState) {\n+ if (dontMutatePrevState) {\n+ state = Object.assign({}, state, partialState);\n+ } else {\n+ state = Object.assign(state, partialState);\n+ }\n+ dontMutatePrevState = false;\n+ isEmpty = false;\n+ }\n+ }\n+ if (update.isForced) {\n+ queue.hasForceUpdate = true;\n+ }\n+ if (update.callback) {\n+ if (callbackList && callbackList.last) {\n+ callbackList.last.next = update;\n+ callbackList.last = update;\n } else {\n- callback();\n+ callbackList = {\n+ first: update,\n+ last: update,\n+ hasForceUpdate: false,\n+ };\n }\n+ workInProgress.effectTag |= CallbackEffect;\n }\n- node = node.next;\n+ update = update.next;\n }\n-};\n \n-function getStateFromNode(node, instance, state, props) {\n- if (typeof node.partialState === 'function') {\n- const updateFn = node.partialState;\n- return updateFn.call(instance, state, props);\n- } else {\n- return node.partialState;\n+ if (isEmpty) {\n+ \/\/ None of the updates contained state. Use the original state object.\n+ state = prevState;\n }\n-}\n \n-exports.mergeUpdateQueue = function(queue : UpdateQueue, instance : any, prevState : any, props : any) : any {\n- let node : ?UpdateQueueNode = queue;\n- if (queue.isReplace) {\n- \/\/ replaceState is always first in the queue.\n- prevState = getStateFromNode(queue, instance, prevState, props);\n- node = queue.next;\n- if (!node) {\n- \/\/ If there is no more work, we replace the raw object instead of cloning.\n- return prevState;\n- }\n+ if (!queue.first && !queue.hasForceUpdate) {\n+ \/\/ Queue is now empty\n+ workInProgress.updateQueue = null;\n }\n- let state = Object.assign({}, prevState);\n- while (node) {\n- let partialState = getStateFromNode(node, instance, state, props);\n- Object.assign(state, partialState);\n- node = node.next;\n+\n+ workInProgress.callbackList = callbackList;\n+ workInProgress.memoizedState = state;\n+\n+ if (__DEV__) {\n+ queue.isProcessing = false;\n }\n+\n return state;\n-};\n+}\n+exports.beginUpdateQueue = beginUpdateQueue;\n+\n+function commitCallbacks(finishedWork : Fiber, callbackList : UpdateQueue, context : mixed) {\n+ const stopAfter = callbackList.last;\n+ let update = callbackList.first;\n+ while (update) {\n+ const callback = update.callback;\n+ if (typeof callback === 'function') {\n+ callback.call(context);\n+ }\n+ if (update === stopAfter) {\n+ break;\n+ }\n+ update = update.next;\n+ }\n+ finishedWork.callbackList = null;\n+}\n+exports.commitCallbacks = commitCallbacks;\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\nnew file mode 100644\nindex 0000000000..1b6627e2ee\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n@@ -0,0 +1,354 @@\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+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+var React;\n+var ReactNoop;\n+\n+describe('ReactIncrementalUpdates', () => {\n+ beforeEach(() => {\n+ jest.resetModuleRegistry();\n+ React = require('React');\n+ ReactNoop = require('ReactNoop');\n+ });\n+\n+ it('applies updates in order of priority', () => {\n+ let state;\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ ReactNoop.performAnimationWork(() => {\n+ \/\/ Has Animation priority\n+ this.setState({ b: 'b' });\n+ this.setState({ c: 'c' });\n+ });\n+ \/\/ Has Task priority\n+ this.setState({ a: 'a' });\n+ }\n+ render() {\n+ state = this.state;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flushDeferredPri(25);\n+ expect(state).toEqual({ a: 'a' });\n+ ReactNoop.flush();\n+ expect(state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+ });\n+\n+ it('applies updates with equal priority in insertion order', () => {\n+ let state;\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ \/\/ All have Task priority\n+ this.setState({ a: 'a' });\n+ this.setState({ b: 'b' });\n+ this.setState({ c: 'c' });\n+ }\n+ render() {\n+ state = this.state;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ expect(state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+ });\n+\n+ it('only drops updates with equal or lesser priority when replaceState is called', () => {\n+ let instance;\n+ let ops = [];\n+ const Foo = React.createClass({\n+ getInitialState() {\n+ return {};\n+ },\n+ componentDidMount() {\n+ ops.push('componentDidMount');\n+ },\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ },\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ },\n+ });\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ instance.setState({ x: 'x' });\n+ instance.setState({ y: 'y' });\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState({ a: 'a' });\n+ instance.setState({ b: 'b' });\n+ });\n+ instance.replaceState({ c: 'c' });\n+ instance.setState({ d: 'd' });\n+\n+ ReactNoop.flushAnimationPri();\n+ \/\/ Even though a replaceState has been already scheduled, it hasn't been\n+ \/\/ flushed yet because it has low priority.\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+ expect(ops).toEqual([\n+ 'render',\n+ 'componentDidMount',\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+\n+ ops = [];\n+\n+ ReactNoop.flush();\n+ \/\/ Now the rest of the updates are flushed.\n+ expect(instance.state).toEqual({ c: 'c', d: 'd' });\n+ expect(ops).toEqual([\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ });\n+\n+ it('can abort an update, schedule additional updates, and resume', () => {\n+ let instance;\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ }\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ ops = [];\n+\n+ let progressedUpdates = [];\n+ function createUpdate(letter) {\n+ return () => {\n+ progressedUpdates.push(letter);\n+ return {\n+ [letter]: letter,\n+ };\n+ };\n+ }\n+\n+ instance.setState(createUpdate('a'));\n+ instance.setState(createUpdate('b'));\n+ instance.setState(createUpdate('c'));\n+\n+ \/\/ Do just enough work to begin the update but not enough to flush it\n+ ReactNoop.flushDeferredPri(15);\n+ \/\/ expect(ReactNoop.getChildren()).toEqual([span('')]);\n+ expect(ops).toEqual(['render']);\n+ expect(progressedUpdates).toEqual(['a', 'b', 'c']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+\n+ ops = [];\n+ progressedUpdates = [];\n+\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState(createUpdate('d'));\n+ instance.setState(createUpdate('e'));\n+ });\n+ instance.setState(createUpdate('g'));\n+\n+ ReactNoop.flushAnimationPri();\n+ expect(ops).toEqual([\n+ \/\/ Flushes animation work (d and e)\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ ops = [];\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ \/\/ Flushes deferred work (f and g)\n+ 'render',\n+ 'componentDidUpdate',\n+ ]);\n+ expect(progressedUpdates).toEqual(['d', 'e', 'a', 'b', 'c', 'f', 'g']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' });\n+ });\n+\n+ it('can abort an update, schedule a replaceState, and resume', () => {\n+ let instance;\n+ let ops = [];\n+ const Foo = React.createClass({\n+ getInitialState() {\n+ return {};\n+ },\n+ componentDidUpdate() {\n+ ops.push('componentDidUpdate');\n+ },\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return (\n+ <span prop={Object.keys(this.state).join('')} \/>\n+ );\n+ },\n+ });\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ ops = [];\n+\n+ let progressedUpdates = [];\n+ function createUpdate(letter) {\n+ return () => {\n+ progressedUpdates.push(letter);\n+ return {\n+ [letter]: letter,\n+ };\n+ };\n+ }\n+\n+ instance.setState(createUpdate('a'));\n+ instance.setState(createUpdate('b'));\n+ instance.setState(createUpdate('c'));\n+\n+ \/\/ Do just enough work to begin the update but not enough to flush it\n+ ReactNoop.flushDeferredPri(20);\n+ expect(ops).toEqual(['render']);\n+ expect(progressedUpdates).toEqual(['a', 'b', 'c']);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c' });\n+\n+ ops = [];\n+ progressedUpdates = [];\n+\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState(createUpdate('d'));\n+ instance.replaceState(createUpdate('e'));\n+ });\n+ instance.setState(createUpdate('g'));\n+\n+ ReactNoop.flush();\n+ \/\/ Ensure that updater function d is never called.\n+ expect(progressedUpdates).toEqual(['e', 'f', 'g']);\n+ expect(instance.state).toEqual({ e: 'e', f: 'f', g: 'g' });\n+ });\n+\n+ it('does not call callbacks that are scheduled by another callback until a later commit', () => {\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ componentDidMount() {\n+ ops.push('did mount');\n+ this.setState({ a: 'a' }, () => {\n+ ops.push('callback a');\n+ this.setState({ b: 'b' }, () => {\n+ ops.push('callback b');\n+ });\n+ });\n+ }\n+ render() {\n+ ops.push('render');\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ 'render',\n+ 'did mount',\n+ 'render',\n+ 'callback a',\n+ 'render',\n+ 'callback b',\n+ ]);\n+ });\n+\n+ it('gives setState during reconciliation the same priority as whatever level is currently reconciling', () => {\n+ let instance;\n+ let ops = [];\n+\n+ class Foo extends React.Component {\n+ state = {};\n+ componentWillReceiveProps() {\n+ ops.push('componentWillReceiveProps');\n+ this.setState({ b: 'b' });\n+ }\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ ops = [];\n+\n+ ReactNoop.performAnimationWork(() => {\n+ instance.setState({ a: 'a' });\n+ ReactNoop.render(<Foo \/>); \/\/ Trigger componentWillReceiveProps\n+ });\n+ ReactNoop.flush();\n+\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+ expect(ops).toEqual([\n+ 'componentWillReceiveProps',\n+ 'render',\n+ ]);\n+ });\n+\n+\n+ it('enqueues setState inside an updater function as if the in-progress update is progressed (and warns)', () => {\n+ spyOn(console, 'error');\n+ let instance;\n+ let ops = [];\n+ class Foo extends React.Component {\n+ state = {};\n+ render() {\n+ ops.push('render');\n+ instance = this;\n+ return <div \/>;\n+ }\n+ }\n+\n+ ReactNoop.render(<Foo \/>);\n+ ReactNoop.flush();\n+\n+ instance.setState(function a() {\n+ ops.push('setState updater');\n+ this.setState({ b: 'b' });\n+ return { a: 'a' };\n+ });\n+\n+ ReactNoop.flush();\n+ expect(ops).toEqual([\n+ \/\/ Initial render\n+ 'render',\n+ 'setState updater',\n+ \/\/ Update b is enqueued with the same priority as update a, so it should\n+ \/\/ be flushed in the same commit.\n+ 'render',\n+ ]);\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+\n+ expectDev(console.error.calls.count()).toBe(1);\n+ console.error.calls.reset();\n+ });\n+});\n","files":[{"path":"examples\/fiber\/index.html","status":"M"},{"path":"scripts\/fiber\/tests-failing.txt","status":"M"},{"path":"scripts\/fiber\/tests-passing-except-dev.txt","status":"M"},{"path":"scripts\/fiber\/tests-passing.txt","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js","status":"M"},{"path":"src\/renderers\/noop\/ReactNoop.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\/ReactFiberClassComponent.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberRoot.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js","status":"A"}]}</article></body></html>

dillon1000/react

Files changed