{"commit":{"authorEmail":"sebastian@calyptus.eu","authorName":"Sebastian Markbåge","revision":"3e54b28c20e0efc663ce8ea1d2e1269615a6f573","shortRevision":"3e54b28c20","authoredAt":"2016-09-13T15:31:14-07:00","subject":"Merge pull request #7344 from acdlite\/fibersetstate"},"patch":"diff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex 390c4f6ac3..4d1bfb46b8 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -20,6 +20,7 @@\n 'use strict';\n \n import type { Fiber } from 'ReactFiber';\n+import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n import type { HostChildren } from 'ReactFiberReconciler';\n \n var ReactFiberReconciler = require('ReactFiberReconciler');\n@@ -153,30 +154,61 @@ var ReactNoop = {\n return;\n }\n \n+ var bufferedLog = [];\n+ function log(...args) {\n+ bufferedLog.push(...args, '\\n');\n+ }\n+\n function logHostInstances(children: Array, depth) {\n for (var i = 0; i < children.length; i++) {\n var child = children[i];\n- console.log(' '.repeat(depth) + '- ' + child.type + '#' + child.id);\n+ log(' '.repeat(depth) + '- ' + child.type + '#' + child.id);\n logHostInstances(child.children, depth + 1);\n }\n }\n function logContainer(container : Container, depth) {\n- console.log(' '.repeat(depth) + '- [root#' + container.rootID + ']');\n+ log(' '.repeat(depth) + '- [root#' + container.rootID + ']');\n logHostInstances(container.children, depth + 1);\n }\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+ );\n+ log(\n+ ' '.repeat(depth + 1) + '~',\n+ updateQueue.partialState,\n+ updateQueue.callback ? 'with callback' : ''\n+ );\n+ var next;\n+ while (next = updateQueue.next) {\n+ log(\n+ ' '.repeat(depth + 1) + '~',\n+ next.partialState,\n+ next.callback ? 'with callback' : ''\n+ );\n+ }\n+ }\n+\n function logFiber(fiber : Fiber, depth) {\n- console.log(\n+ log(\n ' '.repeat(depth) + '- ' + (fiber.type ? fiber.type.name || fiber.type : '[root]'),\n '[' + fiber.pendingWorkPriority + (fiber.pendingProps ? '*' : '') + ']'\n );\n+ if (fiber.updateQueue) {\n+ logUpdateQueue(fiber.updateQueue, depth);\n+ }\n const childInProgress = fiber.progressedChild;\n if (childInProgress && childInProgress !== fiber.child) {\n- console.log(' '.repeat(depth + 1) + 'IN PROGRESS: ' + fiber.progressedPriority);\n+ log(' '.repeat(depth + 1) + 'IN PROGRESS: ' + fiber.progressedPriority);\n logFiber(childInProgress, depth + 1);\n if (fiber.child) {\n- console.log(' '.repeat(depth + 1) + 'CURRENT');\n+ log(' '.repeat(depth + 1) + 'CURRENT');\n }\n+ } else if (fiber.child && fiber.updateQueue) {\n+ log(' '.repeat(depth + 1) + 'CHILDREN');\n }\n if (fiber.child) {\n logFiber(fiber.child, depth + 1);\n@@ -186,10 +218,12 @@ var ReactNoop = {\n }\n }\n \n- console.log('HOST INSTANCES:');\n+ log('HOST INSTANCES:');\n logContainer(rootContainer, 0);\n- console.log('FIBERS:');\n+ log('FIBERS:');\n logFiber((root.stateNode : any).current, 0);\n+\n+ console.log(...bufferedLog);\n },\n \n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiber.js b\/src\/renderers\/shared\/fiber\/ReactFiber.js\nindex 967c6f78b0..7dadfbe47a 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiber.js\n@@ -15,6 +15,7 @@\n import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';\n import type { TypeOfWork } from 'ReactTypeOfWork';\n import type { PriorityLevel } from 'ReactPriorityLevel';\n+import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n \n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n@@ -76,6 +77,12 @@ export type Fiber = Instance & {\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+ memoizedState: any,\n+ \/\/ Linked list of callbacks to call after updates are committed.\n+ callbackList: ?UpdateQueue,\n \/\/ Output is the return value of this fiber, or a linked list of return values\n \/\/ if this returns multiple values. Such as a fragment.\n output: any, \/\/ This type will be more specific once we overload the tag.\n@@ -151,6 +158,9 @@ var createFiber = function(tag : TypeOfWork, key : null | string) : Fiber {\n \n pendingProps: null,\n memoizedProps: null,\n+ updateQueue: null,\n+ memoizedState: null,\n+ callbackList: null,\n output: null,\n \n nextEffect: null,\n@@ -192,6 +202,8 @@ exports.cloneFiber = function(fiber : Fiber, priorityLevel : PriorityLevel) : Fi\n alt.sibling = fiber.sibling; \/\/ This should always be overridden. TODO: null\n alt.ref = fiber.ref;\n alt.pendingProps = fiber.pendingProps; \/\/ TODO: Pass as argument.\n+ alt.updateQueue = fiber.updateQueue;\n+ alt.callbackList = fiber.callbackList;\n alt.pendingWorkPriority = priorityLevel;\n \n alt.child = fiber.child;\n@@ -217,6 +229,8 @@ 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 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 a21bd4059a..80b22b0dd5 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberBeginWork.js\n@@ -14,14 +14,18 @@\n \n import type { ReactCoroutine } from 'ReactCoroutine';\n import type { Fiber } from 'ReactFiber';\n+import type { FiberRoot } from 'ReactFiberRoot';\n import type { HostConfig } from 'ReactFiberReconciler';\n+import type { Scheduler } from 'ReactFiberScheduler';\n import type { PriorityLevel } from 'ReactPriorityLevel';\n+import type { UpdateQueue } from 'ReactFiberUpdateQueue';\n \n var {\n reconcileChildFibers,\n reconcileChildFibersInPlace,\n cloneChildFibers,\n } = require('ReactChildFiber');\n+var { LowPriority } = require('ReactPriorityLevel');\n var ReactTypeOfWork = require('ReactTypeOfWork');\n var {\n IndeterminateComponent,\n@@ -37,8 +41,15 @@ var {\n NoWork,\n OffscreenPriority,\n } = require('ReactPriorityLevel');\n+var {\n+ createUpdateQueue,\n+ addToQueue,\n+ addCallbackToQueue,\n+ mergeUpdateQueue,\n+} = require('ReactFiberUpdateQueue');\n+var ReactInstanceMap = require('ReactInstanceMap');\n \n-module.exports = function(config : HostConfig) {\n+module.exports = function(config : HostConfig, getScheduler : () => Scheduler) {\n \n function markChildAsProgressed(current, workInProgress, priorityLevel) {\n \/\/ We now have clones. Let's store them as the currently progressed work.\n@@ -105,25 +116,116 @@ module.exports = function(config : HostConfig) {\n return workInProgress.child;\n }\n \n+ function scheduleUpdate(fiber: Fiber, updateQueue: UpdateQueue, priorityLevel : PriorityLevel): void {\n+ const { scheduleLowPriWork } = getScheduler();\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+ while (true) {\n+ if (fiber.pendingWorkPriority === NoWork ||\n+ fiber.pendingWorkPriority >= priorityLevel) {\n+ fiber.pendingWorkPriority = priorityLevel;\n+ }\n+ if (fiber.alternate) {\n+ if (fiber.alternate.pendingWorkPriority === NoWork ||\n+ fiber.alternate.pendingWorkPriority >= priorityLevel) {\n+ fiber.alternate.pendingWorkPriority = priorityLevel;\n+ }\n+ }\n+ \/\/ Duck type root\n+ if (fiber.stateNode && fiber.stateNode.containerInfo) {\n+ const root : FiberRoot = (fiber.stateNode : any);\n+ scheduleLowPriWork(root, priorityLevel);\n+ return;\n+ }\n+ if (!fiber.return) {\n+ throw new Error('No root!');\n+ }\n+ fiber = fiber.return;\n+ }\n+ }\n+\n+ \/\/ Class component state updater\n+ const updater = {\n+ enqueueSetState(instance, partialState) {\n+ const fiber = ReactInstanceMap.get(instance);\n+ const updateQueue = fiber.updateQueue ?\n+ addToQueue(fiber.updateQueue, partialState) :\n+ createUpdateQueue(partialState);\n+ scheduleUpdate(fiber, updateQueue, LowPriority);\n+ },\n+ enqueueReplaceState(instance, state) {\n+ const fiber = ReactInstanceMap.get(instance);\n+ const updateQueue = createUpdateQueue(state);\n+ updateQueue.isReplace = true;\n+ scheduleUpdate(fiber, updateQueue, LowPriority);\n+ },\n+ enqueueForceUpdate(instance) {\n+ const fiber = ReactInstanceMap.get(instance);\n+ const updateQueue = fiber.updateQueue || createUpdateQueue(null);\n+ updateQueue.isForced = true;\n+ scheduleUpdate(fiber, updateQueue, LowPriority);\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+ fiber.updateQueue = updateQueue;\n+ if (fiber.alternate) {\n+ fiber.alternate.updateQueue = updateQueue;\n+ }\n+ },\n+ };\n+\n function updateClassComponent(current : ?Fiber, workInProgress : Fiber) {\n+ \/\/ A class component update is the result of either new props or new state.\n+ \/\/ Account for the possibly of missing pending props by falling back to the\n+ \/\/ memoized props.\n var props = workInProgress.pendingProps;\n+ if (!props && current) {\n+ props = current.memoizedProps;\n+ }\n+ \/\/ Compute the state using the memoized state and the update queue.\n+ var updateQueue = workInProgress.updateQueue;\n+ var previousState = current ? current.memoizedState : null;\n+ var state = updateQueue ?\n+ mergeUpdateQueue(updateQueue, previousState, props) :\n+ previousState;\n+\n var instance = workInProgress.stateNode;\n if (!instance) {\n var ctor = workInProgress.type;\n workInProgress.stateNode = instance = new ctor(props);\n- } else if (typeof instance.shouldComponentUpdate === 'function') {\n+ state = instance.state || null;\n+ \/\/ The initial state must be added to the update queue in case\n+ \/\/ setState is called before the initial render.\n+ if (state !== null) {\n+ workInProgress.updateQueue = createUpdateQueue(state);\n+ }\n+ \/\/ The instance needs access to the fiber so that it can schedule updates\n+ ReactInstanceMap.set(instance, workInProgress);\n+ instance.updater = updater;\n+ } else if (typeof instance.shouldComponentUpdate === 'function' &&\n+ !(updateQueue && updateQueue.isForced)) {\n if (workInProgress.memoizedProps !== null) {\n \/\/ Reset the props, in case this is a ping-pong case rather than a\n \/\/ completed update case. For the completed update case, the instance\n \/\/ props will already be the memoizedProps.\n instance.props = workInProgress.memoizedProps;\n- if (!instance.shouldComponentUpdate(props)) {\n+ instance.state = workInProgress.memoizedState;\n+ if (!instance.shouldComponentUpdate(props, state)) {\n return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n }\n }\n \n instance.props = props;\n+ instance.state = state;\n var nextChildren = instance.render();\n reconcileChildren(current, workInProgress, nextChildren);\n \n@@ -251,10 +353,11 @@ module.exports = function(config : HostConfig) {\n workInProgress.child = workInProgress.progressedChild;\n }\n \n- if (workInProgress.pendingProps === null || (\n+ if ((workInProgress.pendingProps === null || (\n workInProgress.memoizedProps !== null &&\n workInProgress.pendingProps === workInProgress.memoizedProps\n- )) {\n+ )) &&\n+ workInProgress.updateQueue === null) {\n return bailoutOnAlreadyFinishedWork(current, workInProgress);\n }\n \ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 2e3e8ae3d0..beb773a2e7 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -22,6 +22,7 @@ var {\n HostContainer,\n HostComponent,\n } = ReactTypeOfWork;\n+var { callCallbacks } = require('ReactFiberUpdateQueue');\n \n module.exports = function(config : HostConfig) {\n \n@@ -31,6 +32,18 @@ module.exports = function(config : HostConfig) {\n function commitWork(current : ?Fiber, finishedWork : Fiber) : void {\n switch (finishedWork.tag) {\n case ClassComponent: {\n+ \/\/ Clear updates from current fiber. This must go before the callbacks\n+ \/\/ are reset, in case an update is triggered from inside a callback. Is\n+ \/\/ this safe? Relies on the assumption that work is only committed if\n+ \/\/ the update queue is empty.\n+ if (finishedWork.alternate) {\n+ finishedWork.alternate.updateQueue = null;\n+ }\n+ if (finishedWork.callbackList) {\n+ const { callbackList } = finishedWork;\n+ finishedWork.callbackList = null;\n+ callCallbacks(callbackList, finishedWork.stateNode);\n+ }\n \/\/ TODO: Fire componentDidMount\/componentDidUpdate, update refs\n return;\n }\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex 14e95a0d73..d4687f4574 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -46,7 +46,6 @@ module.exports = function(config : HostConfig) {\n }\n }\n \n- \/*\n \/\/ TODO: It's possible this will create layout thrash issues because mutations\n \/\/ of the DOM and life-cycles are interleaved. E.g. if a componentDidMount\n \/\/ of a sibling reads, then the next sibling updates and reads etc.\n@@ -59,7 +58,6 @@ module.exports = function(config : HostConfig) {\n }\n workInProgress.lastEffect = workInProgress;\n }\n- *\/\n \n function transferOutput(child : ?Fiber, returnFiber : Fiber) {\n \/\/ If we have a single result, we just pass that through as the output to\n@@ -132,6 +130,17 @@ module.exports = function(config : HostConfig) {\n return null;\n case ClassComponent:\n transferOutput(workInProgress.child, workInProgress);\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+ workInProgress.memoizedState = state;\n+ workInProgress.memoizedProps = props;\n+ \/\/ Transfer update queue to callbackList field so callbacks can be\n+ \/\/ called during commit phase.\n+ workInProgress.callbackList = workInProgress.updateQueue;\n+ markForPostEffect(workInProgress);\n return null;\n case HostContainer:\n transferOutput(workInProgress.child, workInProgress);\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex e04c846f20..874c24928c 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -29,9 +29,19 @@ var {\n \n var timeHeuristicForUnitOfWork = 1;\n \n+export type Scheduler = {\n+ scheduleLowPriWork: (root : FiberRoot, priority : PriorityLevel) => void\n+};\n+\n module.exports = function(config : HostConfig) {\n+ \/\/ Use a closure to circumvent the circular dependency between the scheduler\n+ \/\/ and ReactFiberBeginWork. Don't know if there's a better way to do this.\n+ let scheduler;\n+ function getScheduler(): Scheduler {\n+ return scheduler;\n+ }\n \n- const { beginWork } = ReactFiberBeginWork(config);\n+ const { beginWork } = ReactFiberBeginWork(config, getScheduler);\n const { completeWork } = ReactFiberCompleteWork(config);\n const { commitWork } = ReactFiberCommitWork(config);\n \n@@ -133,6 +143,7 @@ module.exports = function(config : HostConfig) {\n \/\/ The work is now done. We don't need this anymore. This flags\n \/\/ to the system not to redo any work here.\n workInProgress.pendingProps = null;\n+ workInProgress.updateQueue = null;\n \n const returnFiber = workInProgress.return;\n \n@@ -259,7 +270,8 @@ module.exports = function(config : HostConfig) {\n }\n *\/\n \n- return {\n+ scheduler = {\n scheduleLowPriWork: scheduleLowPriWork,\n };\n+ return scheduler;\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\nnew file mode 100644\nindex 0000000000..aab252b655\n--- \/dev\/null\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js\n@@ -0,0 +1,89 @@\n+\/**\n+ * Copyright 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\n+ * @providesModule ReactFiberUpdateQueue\n+ * @flow\n+ *\/\n+\n+'use strict';\n+\n+type UpdateQueueNode = {\n+ partialState: any,\n+ callback: ?Function,\n+ callbackWasCalled: boolean,\n+ next: ?UpdateQueueNode,\n+};\n+\n+export type UpdateQueue = UpdateQueueNode & {\n+ isReplace: boolean,\n+ isForced: boolean,\n+ tail: UpdateQueueNode\n+};\n+\n+exports.createUpdateQueue = function(partialState : mixed) : UpdateQueue {\n+ const queue = {\n+ partialState,\n+ callback: null,\n+ callbackWasCalled: false,\n+ next: null,\n+ isReplace: false,\n+ isForced: false,\n+ tail: (null : any),\n+ };\n+ queue.tail = queue;\n+ return queue;\n+};\n+\n+exports.addToQueue = function(queue : UpdateQueue, partialState : mixed) : UpdateQueue {\n+ const node = {\n+ partialState,\n+ callback: null,\n+ callbackWasCalled: false,\n+ next: null,\n+ };\n+ queue.tail.next = node;\n+ queue.tail = node;\n+ return queue;\n+};\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+ exports.addToQueue(queue, null);\n+ }\n+ queue.tail.callback = callback;\n+ return queue;\n+};\n+\n+exports.callCallbacks = function(queue : UpdateQueue, context : any) {\n+ let node : ?UpdateQueueNode = queue;\n+ while (node) {\n+ if (node.callback && !node.callbackWasCalled) {\n+ node.callbackWasCalled = true;\n+ node.callback.call(context);\n+ }\n+ node = node.next;\n+ }\n+};\n+\n+exports.mergeUpdateQueue = function(queue : UpdateQueue, prevState : any, props : any) : any {\n+ let node : ?UpdateQueueNode = queue;\n+ let state = queue.isReplace ? null : Object.assign({}, prevState);\n+ while (node) {\n+ let partialState;\n+ if (typeof node.partialState === 'function') {\n+ const updateFn = node.partialState;\n+ partialState = updateFn(state, props);\n+ } else {\n+ partialState = node.partialState;\n+ }\n+ state = Object.assign(state || {}, partialState);\n+ node = node.next;\n+ }\n+ return state;\n+};\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex 608a95ea4f..c543de4549 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -556,4 +556,208 @@ describe('ReactIncremental', () => {\n expect(ops).toEqual(['Content', 'Bar', 'Middle']);\n \n });\n+\n+ it('can update in the middle of a tree using setState', () => {\n+ let instance;\n+ class Bar extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { a: 'a' };\n+ instance = this;\n+ }\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+\n+ function Foo() {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(instance.state).toEqual({ a: 'a' });\n+ instance.setState({ b: 'b' });\n+ ReactNoop.flush();\n+ expect(instance.state).toEqual({ a: 'a', b: 'b' });\n+ });\n+\n+ it('can queue multiple state updates', () => {\n+ let instance;\n+ class Bar extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { a: 'a' };\n+ instance = this;\n+ }\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+\n+ function Foo() {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ \/\/ Call setState multiple times before flushing\n+ instance.setState({ b: 'b' });\n+ instance.setState({ c: 'c' });\n+ instance.setState({ d: 'd' });\n+ ReactNoop.flush();\n+ expect(instance.state).toEqual({ a: 'a', b: 'b', c: 'c', d: 'd' });\n+ });\n+\n+ it('can use updater form of setState', () => {\n+ let instance;\n+ class Bar extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { num: 1 };\n+ instance = this;\n+ }\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+\n+ function Foo({ multiplier }) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ function updater(state, props) {\n+ return { num: state.num * props.multiplier };\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(instance.state.num).toEqual(1);\n+ instance.setState(updater);\n+ ReactNoop.flush();\n+ expect(instance.state.num).toEqual(2);\n+ instance.setState(updater);\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(instance.state.num).toEqual(6);\n+ });\n+\n+ it('can call setState inside update callback', () => {\n+ let instance;\n+ class Bar extends React.Component {\n+ constructor() {\n+ super();\n+ this.state = { num: 1 };\n+ instance = this;\n+ }\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+\n+ function Foo({ multiplier }) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ function updater(state, props) {\n+ return { num: state.num * props.multiplier };\n+ }\n+\n+ function callback() {\n+ this.setState({ called: true });\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ instance.setState(updater);\n+ instance.setState(updater, callback);\n+ ReactNoop.flush();\n+ expect(instance.state.num).toEqual(4);\n+ expect(instance.state.called).toEqual(true);\n+ });\n+\n+ it('can replaceState', () => {\n+ let instance;\n+ const Bar = React.createClass({\n+ getInitialState() {\n+ instance = this;\n+ return { a: 'a' };\n+ },\n+ render() {\n+ return

{this.props.children}<\/div>;\n+ },\n+ });\n+\n+ function Foo() {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ instance.setState({ b: 'b' });\n+ instance.setState({ c: 'c' });\n+ instance.replaceState({ d: 'd' });\n+ ReactNoop.flush();\n+ expect(instance.state).toEqual({ d: 'd' });\n+ });\n+\n+ it('can forceUpdate', () => {\n+ const ops = [];\n+\n+ function Baz() {\n+ ops.push('Baz');\n+ return

;\n+ }\n+\n+ let instance;\n+ class Bar extends React.Component {\n+ constructor() {\n+ super();\n+ instance = this;\n+ }\n+ shouldComponentUpdate() {\n+ return false;\n+ }\n+ render() {\n+ ops.push('Bar');\n+ return ;\n+ }\n+ }\n+\n+ function Foo() {\n+ ops.push('Foo');\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(ops).toEqual(['Foo', 'Bar', 'Baz']);\n+ instance.forceUpdate();\n+ ReactNoop.flush();\n+ expect(ops).toEqual(['Foo', 'Bar', 'Baz', 'Bar', 'Baz']);\n+ });\n });\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\nindex 63983720df..f49f09592e 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js\n@@ -354,4 +354,34 @@ describe('ReactIncrementalSideEffects', () => {\n \/\/ moves to \"current\" without flushing due to having lower priority. Does this\n \/\/ even happen? Maybe a child doesn't get processed because it is lower prio?\n \n+ it('calls callback after update is flushed', () => {\n+ let instance;\n+ class Foo extends React.Component {\n+ constructor() {\n+ super();\n+ instance = this;\n+ this.state = { text: 'foo' };\n+ }\n+ render() {\n+ return ;\n+ }\n+ }\n+\n+ ReactNoop.render();\n+ ReactNoop.flush();\n+ expect(ReactNoop.root.children).toEqual([\n+ span('foo'),\n+ ]);\n+ let called = false;\n+ instance.setState({ text: 'bar' }, () => {\n+ expect(ReactNoop.root.children).toEqual([\n+ span('bar'),\n+ ]);\n+ called = true;\n+ });\n+ ReactNoop.flush();\n+ expect(called).toBe(true);\n+ });\n+\n+ \/\/ TODO: Test that callbacks are not lost if an update is preempted.\n });\ndiff --git a\/src\/renderers\/shared\/stack\/reconciler\/ReactInstanceMap.js b\/src\/renderers\/shared\/shared\/ReactInstanceMap.js\nsimilarity index 100%\nrename from src\/renderers\/shared\/stack\/reconciler\/ReactInstanceMap.js\nrename to src\/renderers\/shared\/shared\/ReactInstanceMap.js\n","parents":["a19fede67c96eed553e1b36f0d7786d1d668b61b","27d1210c1d00e9b34839fd5596a74d8af52ffa7f"],"files":[{"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\/ReactFiberCommitWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js"},{"status":"A","path":"src\/renderers\/shared\/fiber\/ReactFiberUpdateQueue.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalSideEffects-test.js"},{"status":"R100","path":"src\/renderers\/shared\/shared\/ReactInstanceMap.js","previousPath":"src\/renderers\/shared\/stack\/reconciler\/ReactInstanceMap.js"}],"body":"[Fiber] setState"}

dillon1000/react

Files changed