{"body":"ReactDOM.flushSync(batch)","parents":["1f74eca9937ad6f19b6291d21edfb8747bae88ca"],"commit":{"shortRevision":"0a24255475","authorName":"Andrew Clark","authoredAt":"2017-07-21T13:22:11-07:00","revision":"0a242554750bb288f88f62e9ed8541597baf9418","authorEmail":"acdlite@me.com","subject":"ReactDOM.activeUpdates (#10225)"},"patch":"diff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex e20f6c6f0c..eaf497de2c 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -682,6 +682,10 @@ src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js\n * updates inside an async tree are async by default\n * AsyncComponent creates an async subtree\n * updates inside an async subtree are async by default\n+* flushSync batches sync updates and flushes them at the end of the batch\n+* flushSync flushes updates even if nested inside another flushSync\n+* flushSync throws if already performing work\n+* flushSync flushes updates before end of the tick\n \n src\/renderers\/dom\/shared\/__tests__\/CSSProperty-test.js\n * should generate browser prefixes for its `isUnitlessNumber`\n@@ -2160,7 +2164,6 @@ src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n * can call setState inside update callback\n * can replaceState\n * can forceUpdate\n-* performs batched updates at the end of the batch\n * can nest batchedUpdates\n * can handle if setState callback throws\n * merges and masks context\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiberEntry.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiberEntry.js\nindex 8ce0ca92ff..e1b338d53d 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiberEntry.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiberEntry.js\n@@ -742,6 +742,8 @@ var ReactDOMFiber = {\n \n unstable_deferredUpdates: DOMRenderer.deferredUpdates,\n \n+ flushSync: DOMRenderer.flushSync,\n+\n __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {\n \/\/ For TapEventPlugin which is popular in open source\n EventPluginHub: require('EventPluginHub'),\ndiff --git a\/src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js b\/src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js\nindex b81789caaa..8b1211c43f 100644\n--- a\/src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js\n+++ b\/src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js\n@@ -134,6 +134,151 @@ describe('ReactDOMFiberAsync', () => {\n jest.runAllTimers();\n expect(container.textContent).toEqual('1');\n });\n+\n+ it('flushSync batches sync updates and flushes them at the end of the batch', () => {\n+ let ops = [];\n+ let instance;\n+\n+ class Component extends React.Component {\n+ state = {text: ''};\n+ push(val) {\n+ this.setState(state => ({text: state.text + val}));\n+ }\n+ componentDidUpdate() {\n+ ops.push(this.state.text);\n+ }\n+ render() {\n+ instance = this;\n+ return {this.state.text}<\/span>;\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ instance.push('A');\n+ expect(ops).toEqual(['A']);\n+ expect(container.textContent).toEqual('A');\n+\n+ ReactDOM.flushSync(() => {\n+ instance.push('B');\n+ instance.push('C');\n+ \/\/ Not flushed yet\n+ expect(container.textContent).toEqual('A');\n+ expect(ops).toEqual(['A']);\n+ });\n+ expect(container.textContent).toEqual('ABC');\n+ expect(ops).toEqual(['A', 'ABC']);\n+ instance.push('D');\n+ expect(container.textContent).toEqual('ABCD');\n+ expect(ops).toEqual(['A', 'ABC', 'ABCD']);\n+ });\n+\n+ it('flushSync flushes updates even if nested inside another flushSync', () => {\n+ let ops = [];\n+ let instance;\n+\n+ class Component extends React.Component {\n+ state = {text: ''};\n+ push(val) {\n+ this.setState(state => ({text: state.text + val}));\n+ }\n+ componentDidUpdate() {\n+ ops.push(this.state.text);\n+ }\n+ render() {\n+ instance = this;\n+ return {this.state.text}<\/span>;\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ instance.push('A');\n+ expect(ops).toEqual(['A']);\n+ expect(container.textContent).toEqual('A');\n+\n+ ReactDOM.flushSync(() => {\n+ instance.push('B');\n+ instance.push('C');\n+ \/\/ Not flushed yet\n+ expect(container.textContent).toEqual('A');\n+ expect(ops).toEqual(['A']);\n+\n+ ReactDOM.flushSync(() => {\n+ instance.push('D');\n+ });\n+ \/\/ The nested flushSync caused everything to flush.\n+ expect(container.textContent).toEqual('ABCD');\n+ expect(ops).toEqual(['A', 'ABCD']);\n+ });\n+ expect(container.textContent).toEqual('ABCD');\n+ expect(ops).toEqual(['A', 'ABCD']);\n+ });\n+\n+ it('flushSync throws if already performing work', () => {\n+ class Component extends React.Component {\n+ componentDidUpdate() {\n+ ReactDOM.flushSync(() => {});\n+ }\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ \/\/ Initial mount\n+ ReactDOM.render(, container);\n+ \/\/ Update\n+ expect(() => ReactDOM.render(, container)).toThrow(\n+ 'flushSync was called from inside a lifecycle method',\n+ );\n+ });\n+\n+ it('flushSync flushes updates before end of the tick', () => {\n+ let ops = [];\n+ let instance;\n+\n+ class Component extends React.unstable_AsyncComponent {\n+ state = {text: ''};\n+ push(val) {\n+ this.setState(state => ({text: state.text + val}));\n+ }\n+ componentDidUpdate() {\n+ ops.push(this.state.text);\n+ }\n+ render() {\n+ instance = this;\n+ return {this.state.text}<\/span>;\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+ jest.runAllTimers();\n+\n+ \/\/ Updates are async by default\n+ instance.push('A');\n+ expect(ops).toEqual([]);\n+ expect(container.textContent).toEqual('');\n+\n+ ReactDOM.flushSync(() => {\n+ instance.push('B');\n+ instance.push('C');\n+ \/\/ Not flushed yet\n+ expect(container.textContent).toEqual('');\n+ expect(ops).toEqual([]);\n+ });\n+ \/\/ Only the active updates have flushed\n+ expect(container.textContent).toEqual('BC');\n+ expect(ops).toEqual(['BC']);\n+\n+ instance.push('D');\n+ expect(container.textContent).toEqual('BC');\n+ expect(ops).toEqual(['BC']);\n+\n+ \/\/ Flush the async updates\n+ jest.runAllTimers();\n+ expect(container.textContent).toEqual('BCAD');\n+ expect(ops).toEqual(['BC', 'BCAD']);\n+ });\n });\n }\n });\ndiff --git a\/src\/renderers\/native\/ReactNativeFiberEntry.js b\/src\/renderers\/native\/ReactNativeFiberEntry.js\nindex 57c48bc168..2beee4bdfb 100644\n--- a\/src\/renderers\/native\/ReactNativeFiberEntry.js\n+++ b\/src\/renderers\/native\/ReactNativeFiberEntry.js\n@@ -89,6 +89,8 @@ const ReactNativeFiber: ReactNativeType = {\n \n unstable_batchedUpdates: ReactGenericBatching.batchedUpdates,\n \n+ flushSync: ReactNativeFiberRenderer.flushSync,\n+\n __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {\n \/\/ Used as a mixin in many createClass-based components\n NativeMethodsMixin: require('NativeMethodsMixin'),\ndiff --git a\/src\/renderers\/noop\/ReactNoopEntry.js b\/src\/renderers\/noop\/ReactNoopEntry.js\nindex a71e704ebb..bd9a21d124 100644\n--- a\/src\/renderers\/noop\/ReactNoopEntry.js\n+++ b\/src\/renderers\/noop\/ReactNoopEntry.js\n@@ -361,7 +361,7 @@ var ReactNoop = {\n \n unbatchedUpdates: NoopRenderer.unbatchedUpdates,\n \n- syncUpdates: NoopRenderer.syncUpdates,\n+ flushSync: NoopRenderer.flushSync,\n \n \/\/ Logs the current state of the tree.\n dumpTree(rootID: string = DEFAULT_ROOT_ID) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex a269ad4e12..2edad98499 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -166,7 +166,7 @@ export type Reconciler = {\n performWithPriority(priorityLevel: PriorityLevel, fn: Function): void,\n batchedUpdates(fn: () => A): A,\n unbatchedUpdates (fn: () => A): A,\n- syncUpdates (fn: () => A): A,\n+ flushSync (fn: () => A): A,\n deferredUpdates (fn: () => A): A,\n \n \/\/ Used to extract the return value from the initial render. Legacy API.\n@@ -199,7 +199,7 @@ module.exports = function(\n performWithPriority,\n batchedUpdates,\n unbatchedUpdates,\n- syncUpdates,\n+ flushSync,\n deferredUpdates,\n } = ReactFiberScheduler(config);\n \n@@ -290,10 +290,10 @@ module.exports = function(\n \n unbatchedUpdates,\n \n- syncUpdates,\n-\n deferredUpdates,\n \n+ flushSync,\n+\n getPublicRootInstance(\n container: OpaqueRoot,\n ): ReactComponent | PI | null {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 77239e5713..22f70f9066 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -1497,13 +1497,23 @@ module.exports = function(\n }\n }\n \n- function syncUpdates (fn: () => A): A {\n+ function flushSync (batch: () => A): A {\n+ const previousIsBatchingUpdates = isBatchingUpdates;\n const previousPriorityContext = priorityContext;\n+ isBatchingUpdates = true;\n priorityContext = SynchronousPriority;\n try {\n- return fn();\n+ return batch();\n } finally {\n+ isBatchingUpdates = previousIsBatchingUpdates;\n priorityContext = previousPriorityContext;\n+\n+ invariant(\n+ !isPerformingWork,\n+ 'flushSync was called from inside a lifecycle method. It cannot be ' +\n+ 'called when React is already rendering.',\n+ );\n+ performWork(TaskPriority, null);\n }\n }\n \n@@ -1523,7 +1533,7 @@ module.exports = function(\n performWithPriority: performWithPriority,\n batchedUpdates: batchedUpdates,\n unbatchedUpdates: unbatchedUpdates,\n- syncUpdates: syncUpdates,\n+ flushSync: flushSync,\n deferredUpdates: deferredUpdates,\n };\n };\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\nindex 8ffc8c75fc..63935f5ca4 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js\n@@ -326,7 +326,7 @@ describe('ReactIncremental', () => {\n }\n \n \/\/ Init\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render();\n });\n ReactNoop.flush();\n@@ -335,7 +335,7 @@ describe('ReactIncremental', () => {\n ops = [];\n \n \/\/ Render the high priority work (everying except the hidden trees).\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render();\n });\n expect(ops).toEqual(['Foo', 'Bar', 'Bar']);\n@@ -773,7 +773,7 @@ describe('ReactIncremental', () => {\n \/\/ Interrupt the current low pri work with a high pri update elsewhere in\n \/\/ the tree.\n ops = [];\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n sibling.setState({});\n });\n expect(ops).toEqual(['Sibling']);\n@@ -1661,42 +1661,6 @@ describe('ReactIncremental', () => {\n },\n );\n \n- it('performs batched updates at the end of the batch', () => {\n- var ops = [];\n- var instance;\n-\n- class Foo extends React.Component {\n- state = {n: 0};\n- render() {\n- instance = this;\n- return

;\n- }\n- }\n-\n- ReactNoop.render();\n- ReactNoop.flush();\n- ops = [];\n-\n- ReactNoop.syncUpdates(() => {\n- ReactNoop.batchedUpdates(() => {\n- instance.setState({n: 1}, () => ops.push('setState 1'));\n- instance.setState({n: 2}, () => ops.push('setState 2'));\n- ops.push('end batchedUpdates');\n- });\n- ops.push('end syncUpdates');\n- });\n-\n- \/\/ ReactNoop.flush() not needed because updates are synchronous\n-\n- expect(ops).toEqual([\n- 'end batchedUpdates',\n- 'setState 1',\n- 'setState 2',\n- 'end syncUpdates',\n- ]);\n- expect(instance.state.n).toEqual(2);\n- });\n-\n it('can nest batchedUpdates', () => {\n var ops = [];\n var instance;\n@@ -1713,7 +1677,7 @@ describe('ReactIncremental', () => {\n ReactNoop.flush();\n ops = [];\n \n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.batchedUpdates(() => {\n instance.setState({n: 1}, () => ops.push('setState 1'));\n instance.setState({n: 2}, () => ops.push('setState 2'));\n@@ -1724,7 +1688,6 @@ describe('ReactIncremental', () => {\n });\n ops.push('end outer batchedUpdates');\n });\n- ops.push('end syncUpdates');\n });\n \n \/\/ ReactNoop.flush() not needed because updates are synchronous\n@@ -1736,7 +1699,6 @@ describe('ReactIncremental', () => {\n 'setState 2',\n 'setState 3',\n 'setState 4',\n- 'end syncUpdates',\n ]);\n expect(instance.state.n).toEqual(4);\n });\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalErrorHandling-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalErrorHandling-test.js\nindex ad6d630aac..f440ea5746 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalErrorHandling-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalErrorHandling-test.js\n@@ -134,7 +134,7 @@ describe('ReactIncrementalErrorHandling', () => {\n throw new Error('Hello');\n }\n \n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render(\n \n \n@@ -176,19 +176,17 @@ describe('ReactIncrementalErrorHandling', () => {\n throw new Error('Hello');\n }\n \n- ReactNoop.syncUpdates(() => {\n- ReactNoop.batchedUpdates(() => {\n- ReactNoop.render(\n- \n- Before the storm.\n- <\/ErrorBoundary>,\n- );\n- ReactNoop.render(\n- \n- \n- <\/ErrorBoundary>,\n- );\n- });\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.render(\n+ \n+ Before the storm.\n+ <\/ErrorBoundary>,\n+ );\n+ ReactNoop.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ );\n });\n \n expect(ops).toEqual([\n@@ -292,7 +290,7 @@ describe('ReactIncrementalErrorHandling', () => {\n }\n \n expect(() => {\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render(\n \n \n@@ -327,19 +325,17 @@ describe('ReactIncrementalErrorHandling', () => {\n }\n \n expect(() => {\n- ReactNoop.syncUpdates(() => {\n- ReactNoop.batchedUpdates(() => {\n- ReactNoop.render(\n- \n- Before the storm.\n- <\/RethrowErrorBoundary>,\n- );\n- ReactNoop.render(\n- \n- \n- <\/RethrowErrorBoundary>,\n- );\n- });\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.render(\n+ \n+ Before the storm.\n+ <\/RethrowErrorBoundary>,\n+ );\n+ ReactNoop.render(\n+ \n+ \n+ <\/RethrowErrorBoundary>,\n+ );\n });\n }).toThrow('Hello');\n expect(ops).toEqual([\n@@ -383,7 +379,7 @@ describe('ReactIncrementalErrorHandling', () => {\n it('applies sync updates regardless despite errors in scheduling', () => {\n ReactNoop.render();\n expect(() => {\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.batchedUpdates(() => {\n ReactNoop.render();\n ReactNoop.render();\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalPerf-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalPerf-test.js\nindex 8e0a51759c..c04b4782e7 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalPerf-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalPerf-test.js\n@@ -282,7 +282,7 @@ describe('ReactDebugFiberPerf', () => {\n \n it('measures deprioritized work', () => {\n addComment('Flush the parent');\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render(\n \n

\n@@ -498,7 +498,7 @@ describe('ReactDebugFiberPerf', () => {\n return ;\n }\n }\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render();\n });\n expect(getFlameChart()).toMatchSnapshot();\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\nindex f58d187d92..d73ebe4133 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js\n@@ -56,7 +56,7 @@ describe('ReactIncrementalScheduling', () => {\n \n ReactNoop.batchedUpdates(() => {\n ReactNoop.render();\n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render();\n ReactNoop.render();\n ReactNoop.render();\n@@ -213,7 +213,7 @@ describe('ReactIncrementalScheduling', () => {\n }\n }\n \n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n ReactNoop.render();\n });\n \/\/ The cDM update should not have flushed yet because it has async priority.\n@@ -268,29 +268,25 @@ describe('ReactIncrementalScheduling', () => {\n });\n \n it('can opt-out of batching using unbatchedUpdates', () => {\n- \/\/ syncUpdates gives synchronous priority to updates\n- ReactNoop.syncUpdates(() => {\n- \/\/ batchedUpdates downgrades sync updates to task priority\n- ReactNoop.batchedUpdates(() => {\n- ReactNoop.render();\n- expect(ReactNoop.getChildren()).toEqual([]);\n- \/\/ Should not have flushed yet because we're still batching\n-\n- \/\/ unbatchedUpdates reverses the effect of batchedUpdates, so sync\n- \/\/ updates are not batched\n- ReactNoop.unbatchedUpdates(() => {\n- ReactNoop.render();\n- expect(ReactNoop.getChildren()).toEqual([span(1)]);\n- ReactNoop.render();\n- expect(ReactNoop.getChildren()).toEqual([span(2)]);\n- });\n-\n- ReactNoop.render();\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.render();\n+ expect(ReactNoop.getChildren()).toEqual([]);\n+ \/\/ Should not have flushed yet because we're still batching\n+\n+ \/\/ unbatchedUpdates reverses the effect of batchedUpdates, so sync\n+ \/\/ updates are not batched\n+ ReactNoop.unbatchedUpdates(() => {\n+ ReactNoop.render();\n+ expect(ReactNoop.getChildren()).toEqual([span(1)]);\n+ ReactNoop.render();\n expect(ReactNoop.getChildren()).toEqual([span(2)]);\n });\n- \/\/ Remaining update is now flushed\n- expect(ReactNoop.getChildren()).toEqual([span(3)]);\n+\n+ ReactNoop.render();\n+ expect(ReactNoop.getChildren()).toEqual([span(2)]);\n });\n+ \/\/ Remaining update is now flushed\n+ expect(ReactNoop.getChildren()).toEqual([span(3)]);\n });\n \n it('nested updates are always deferred, even inside unbatchedUpdates', () => {\n@@ -320,10 +316,10 @@ describe('ReactIncrementalScheduling', () => {\n ReactNoop.flush();\n expect(ReactNoop.getChildren()).toEqual([span(0)]);\n \n- ReactNoop.syncUpdates(() => {\n+ ReactNoop.flushSync(() => {\n instance.setState({step: 1});\n- expect(ReactNoop.getChildren()).toEqual([span(2)]);\n });\n+ expect(ReactNoop.getChildren()).toEqual([span(2)]);\n \n expect(ops).toEqual([\n 'render: 0',\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalTriangle-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalTriangle-test.js\nindex a07b078e96..ddc2337ed2 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalTriangle-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalTriangle-test.js\n@@ -79,17 +79,13 @@ describe('ReactIncrementalTriangle', () => {\n if (this.props.depth !== 0) {\n throw new Error('Cannot activate non-leaf component');\n }\n- ReactNoop.syncUpdates(() => {\n- this.setState({isActive: true});\n- });\n+ this.setState({isActive: true});\n }\n deactivate() {\n if (this.props.depth !== 0) {\n throw new Error('Cannot deactivate non-leaf component');\n }\n- ReactNoop.syncUpdates(() => {\n- this.setState({isActive: false});\n- });\n+ this.setState({isActive: false});\n }\n shouldComponentUpdate(nextProps, nextState) {\n return (\n@@ -121,9 +117,7 @@ describe('ReactIncrementalTriangle', () => {\n state = {counter: 0};\n interrupt() {\n \/\/ Triggers a restart from the top.\n- ReactNoop.syncUpdates(() => {\n- this.forceUpdate();\n- });\n+ this.forceUpdate();\n }\n setCounter(counter) {\n const currentCounter = this.state.counter;\n@@ -193,15 +187,17 @@ describe('ReactIncrementalTriangle', () => {\n \n let activeTriangle = null;\n for (var i = 0; i < actions.length; i++) {\n- ReactNoop.batchedUpdates(() => {\n+ ReactNoop.flushSync(() => {\n const action = actions[i];\n switch (action.type) {\n case FLUSH:\n ReactNoop.flushUnitsOfWork(action.unitsOfWork);\n break;\n case STEP:\n- app.setCounter(action.counter);\n- expectedCounterAtEnd = action.counter;\n+ ReactNoop.deferredUpdates(() => {\n+ app.setCounter(action.counter);\n+ expectedCounterAtEnd = action.counter;\n+ });\n break;\n case INTERRUPT:\n app.interrupt();\ndiff --git a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\nindex 96c26ace1b..c4f980c517 100644\n--- a\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n+++ b\/src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js\n@@ -96,18 +96,16 @@ describe('ReactIncrementalUpdates', () => {\n ReactNoop.render();\n ReactNoop.flush();\n \n- ReactNoop.syncUpdates(() => {\n- ReactNoop.batchedUpdates(() => {\n- ReactNoop.deferredUpdates(() => {\n- instance.setState({x: 'x'});\n- instance.setState({y: 'y'});\n- });\n- instance.setState({a: 'a'});\n- instance.setState({b: 'b'});\n- ReactNoop.deferredUpdates(() => {\n- instance.updater.enqueueReplaceState(instance, {c: 'c'});\n- instance.setState({d: 'd'});\n- });\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.deferredUpdates(() => {\n+ instance.setState({x: 'x'});\n+ instance.setState({y: 'y'});\n+ });\n+ instance.setState({a: 'a'});\n+ instance.setState({b: 'b'});\n+ ReactNoop.deferredUpdates(() => {\n+ instance.updater.enqueueReplaceState(instance, {c: 'c'});\n+ instance.setState({d: 'd'});\n });\n });\n \n@@ -160,15 +158,13 @@ describe('ReactIncrementalUpdates', () => {\n ReactNoop.flushThrough(['a', 'b', 'c']);\n expect(ReactNoop.getChildren()).toEqual([span('')]);\n \n- \/\/ Schedule some more updates at different priorities\n- ReactNoop.batchedUpdates(() => {\n- instance.setState(createUpdate('f'));\n- ReactNoop.syncUpdates(() => {\n- instance.setState(createUpdate('d'));\n- instance.setState(createUpdate('e'));\n- });\n- instance.setState(createUpdate('g'));\n+ \/\/ Schedule some more updates at different priorities{\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.flushSync(() => {\n+ instance.setState(createUpdate('d'));\n+ instance.setState(createUpdate('e'));\n });\n+ instance.setState(createUpdate('g'));\n \n \/\/ The sync updates should have flushed, but not the async ones\n expect(ReactNoop.getChildren()).toEqual([span('de')]);\n@@ -210,17 +206,15 @@ describe('ReactIncrementalUpdates', () => {\n ReactNoop.flushThrough(['a', 'b', 'c']);\n expect(ReactNoop.getChildren()).toEqual([span('')]);\n \n- \/\/ Schedule some more updates at different priorities\n- ReactNoop.batchedUpdates(() => {\n- instance.setState(createUpdate('f'));\n- ReactNoop.syncUpdates(() => {\n- instance.setState(createUpdate('d'));\n- \/\/ No longer a public API, but we can test that it works internally by\n- \/\/ reaching into the updater.\n- instance.updater.enqueueReplaceState(instance, createUpdate('e'));\n- });\n- instance.setState(createUpdate('g'));\n+ \/\/ Schedule some more updates at different priorities{\n+ instance.setState(createUpdate('f'));\n+ ReactNoop.flushSync(() => {\n+ instance.setState(createUpdate('d'));\n+ \/\/ No longer a public API, but we can test that it works internally by\n+ \/\/ reaching into the updater.\n+ instance.updater.enqueueReplaceState(instance, createUpdate('e'));\n });\n+ instance.setState(createUpdate('g'));\n \n \/\/ The sync updates should have flushed, but not the async ones. Update d\n \/\/ was dropped and replaced by e.\n@@ -307,11 +301,9 @@ describe('ReactIncrementalUpdates', () => {\n \n ops = [];\n \n- ReactNoop.batchedUpdates(() => {\n- ReactNoop.syncUpdates(() => {\n- instance.setState({a: 'a'});\n- ReactNoop.render(); \/\/ Trigger componentWillReceiveProps\n- });\n+ ReactNoop.flushSync(() => {\n+ instance.setState({a: 'a'});\n+ ReactNoop.render(); \/\/ Trigger componentWillReceiveProps\n });\n \n expect(instance.state).toEqual({a: 'a', b: 'b'});\n","files":[{"path":"scripts\/fiber\/tests-passing.txt","status":"M"},{"path":"src\/renderers\/dom\/fiber\/ReactDOMFiberEntry.js","status":"M"},{"path":"src\/renderers\/dom\/fiber\/__tests__\/ReactDOMFiberAsync-test.js","status":"M"},{"path":"src\/renderers\/native\/ReactNativeFiberEntry.js","status":"M"},{"path":"src\/renderers\/noop\/ReactNoopEntry.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncremental-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalErrorHandling-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalPerf-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalScheduling-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalTriangle-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/__tests__\/ReactIncrementalUpdates-test.js","status":"M"}]}

dillon1000/react

Files changed