{"patch":"diff --git a\/fixtures\/unstable-async\/time-slicing\/src\/index.js b\/fixtures\/unstable-async\/time-slicing\/src\/index.js\nindex 6e23aba0ca..dc88906172 100644\n--- a\/fixtures\/unstable-async\/time-slicing\/src\/index.js\n+++ b\/fixtures\/unstable-async\/time-slicing\/src\/index.js\n@@ -1,6 +1,6 @@\n import React, {PureComponent} from 'react';\n-import {flushSync, render} from 'react-dom';\n-import {unstable_scheduleCallback} from 'scheduler';\n+import {flushSync, unstable_createRoot} from 'react-dom';\n+import Scheduler from 'scheduler';\n import _ from 'lodash';\n import Charts from '.\/Charts';\n import Clock from '.\/Clock';\n@@ -67,7 +67,7 @@ class App extends PureComponent {\n }\n this._ignoreClick = true;\n \n- unstable_scheduleCallback(() => {\n+ Scheduler.unstable_next(() => {\n this.setState({showDemo: true}, () => {\n this._ignoreClick = false;\n });\n@@ -146,9 +146,5 @@ class App extends PureComponent {\n }\n \n const container = document.getElementById('root');\n-render(\n- \n- \n- <\/React.unstable_ConcurrentMode>,\n- container\n-);\n+const root = ReactDOM.unstable_createRoot(container);\n+root.render(, container);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\nindex 760ed6d445..5d85217921 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiberAsync-test.internal.js\n@@ -16,8 +16,6 @@ let ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n let ReactDOM;\n let Scheduler;\n \n-const ConcurrentMode = React.unstable_ConcurrentMode;\n-\n const setUntrackedInputValue = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n@@ -86,12 +84,9 @@ describe('ReactDOMFiberAsync', () => {\n );\n }\n }\n- ReactDOM.render(\n- \n- \n- <\/ConcurrentMode>,\n- container,\n- );\n+ const root = ReactDOM.unstable_createRoot(container);\n+ root.render();\n+ Scheduler.flushAll();\n expect(asyncValueRef.current.textContent).toBe('');\n expect(syncValueRef.current.textContent).toBe('');\n \n@@ -108,34 +103,7 @@ describe('ReactDOMFiberAsync', () => {\n expect(syncValueRef.current.textContent).toBe('hello');\n });\n \n- describe('with feature flag disabled', () => {\n- beforeEach(() => {\n- jest.resetModules();\n- ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactDOM = require('react-dom');\n- Scheduler = require('scheduler');\n- });\n-\n- it('renders synchronously', () => {\n- ReactDOM.render(\n- \n-

Hi<\/div>\n- <\/ConcurrentMode>,\n- container,\n- );\n- expect(container.textContent).toEqual('Hi');\n-\n- ReactDOM.render(\n- \n-

Bye<\/div>\n- <\/ConcurrentMode>,\n- container,\n- );\n- expect(container.textContent).toEqual('Bye');\n- });\n- });\n-\n- describe('with feature flag enabled', () => {\n+ describe('concurrent mode', () => {\n beforeEach(() => {\n jest.resetModules();\n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n@@ -144,7 +112,7 @@ describe('ReactDOMFiberAsync', () => {\n Scheduler = require('scheduler');\n });\n \n- it('createRoot makes the entire tree async', () => {\n+ it('top-level updates are concurrent', () => {\n const root = ReactDOM.unstable_createRoot(container);\n root.render(

Hi<\/div>);\n expect(container.textContent).toEqual('');\n@@ -157,7 +125,7 @@ describe('ReactDOMFiberAsync', () => {\n expect(container.textContent).toEqual('Bye');\n });\n \n- it('updates inside an async tree are async by default', () => {\n+ it('deep updates (setState) are oncurrent', () => {\n let instance;\n class Component extends React.Component {\n state = {step: 0};\n@@ -179,56 +147,6 @@ describe('ReactDOMFiberAsync', () => {\n expect(container.textContent).toEqual('1');\n });\n \n- it('ConcurrentMode creates an async subtree', () => {\n- let instance;\n- class Component extends React.Component {\n- state = {step: 0};\n- render() {\n- instance = this;\n- return

{this.state.step}<\/div>;\n- }\n- }\n-\n- ReactDOM.render(\n- \n- \n- <\/ConcurrentMode>,\n- container,\n- );\n- Scheduler.flushAll();\n-\n- instance.setState({step: 1});\n- expect(container.textContent).toEqual('0');\n- Scheduler.flushAll();\n- expect(container.textContent).toEqual('1');\n- });\n-\n- it('updates inside an async subtree are async by default', () => {\n- let instance;\n- class Child extends React.Component {\n- state = {step: 0};\n- render() {\n- instance = this;\n- return

{this.state.step}<\/div>;\n- }\n- }\n-\n- ReactDOM.render(\n-

\n- \n- \n- <\/ConcurrentMode>\n- <\/div>,\n- container,\n- );\n- Scheduler.flushAll();\n-\n- instance.setState({step: 1});\n- expect(container.textContent).toEqual('0');\n- Scheduler.flushAll();\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@@ -345,12 +263,8 @@ describe('ReactDOMFiberAsync', () => {\n }\n }\n \n- ReactDOM.render(\n- \n- \n- <\/ConcurrentMode>,\n- container,\n- );\n+ const root = ReactDOM.unstable_createRoot(container);\n+ root.render();\n Scheduler.flushAll();\n \n \/\/ Updates are async by default\n@@ -390,12 +304,9 @@ describe('ReactDOMFiberAsync', () => {\n return this.state.counter;\n }\n }\n- ReactDOM.render(\n- \n- \n- <\/ConcurrentMode>,\n- container,\n- );\n+ const root = ReactDOM.unstable_createRoot(container);\n+ root.render();\n+ Scheduler.flushAll();\n expect(container.textContent).toEqual('0');\n \n \/\/ Test that a normal update is async\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMHooks-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMHooks-test.js\nindex 360cfa9f9a..bc85d18b10 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMHooks-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMHooks-test.js\n@@ -141,7 +141,7 @@ describe('ReactDOMHooks', () => {\n expect(labelRef.current.innerHTML).toBe('abc');\n });\n \n- it('should not bail out when an update is scheduled from within an event handler in ConcurrentMode', () => {\n+ it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', () => {\n const {createRef, useCallback, useState} = React;\n \n const Example = ({inputRef, labelRef}) => {\n@@ -162,11 +162,7 @@ describe('ReactDOMHooks', () => {\n const labelRef = createRef();\n \n const root = ReactDOM.unstable_createRoot(container);\n- root.render(\n- \n- \n- <\/React.unstable_ConcurrentMode>,\n- );\n+ root.render();\n \n Scheduler.flushAll();\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\nindex 670f45e28b..095f44f554 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n@@ -13,7 +13,6 @@ let React = require('react');\n let ReactDOM = require('react-dom');\n let ReactDOMServer = require('react-dom\/server');\n let Scheduler = require('scheduler');\n-let ConcurrentMode = React.unstable_ConcurrentMode;\n \n describe('ReactDOMRoot', () => {\n let container;\n@@ -25,7 +24,6 @@ describe('ReactDOMRoot', () => {\n ReactDOM = require('react-dom');\n ReactDOMServer = require('react-dom\/server');\n Scheduler = require('scheduler');\n- ConcurrentMode = React.unstable_ConcurrentMode;\n });\n \n it('renders children', () => {\n@@ -47,7 +45,7 @@ describe('ReactDOMRoot', () => {\n \n it('`root.render` returns a thenable work object', () => {\n const root = ReactDOM.unstable_createRoot(container);\n- const work = root.render(Hi<\/ConcurrentMode>);\n+ const work = root.render('Hi');\n let ops = [];\n work.then(() => {\n ops.push('inside callback: ' + container.textContent);\n@@ -65,7 +63,7 @@ describe('ReactDOMRoot', () => {\n \n it('resolves `work.then` callback synchronously if the work already committed', () => {\n const root = ReactDOM.unstable_createRoot(container);\n- const work = root.render(Hi<\/ConcurrentMode>);\n+ const work = root.render('Hi');\n Scheduler.flushAll();\n let ops = [];\n work.then(() => {\n@@ -157,11 +155,7 @@ describe('ReactDOMRoot', () => {\n \n const root = ReactDOM.unstable_createRoot(container);\n const batch = root.createBatch();\n- batch.render(\n- \n- \n- <\/ConcurrentMode>,\n- );\n+ batch.render();\n \n Scheduler.flushAll();\n \n@@ -208,7 +202,7 @@ describe('ReactDOMRoot', () => {\n it('can wait for a batch to finish', () => {\n const root = ReactDOM.unstable_createRoot(container);\n const batch = root.createBatch();\n- batch.render(Foo<\/ConcurrentMode>);\n+ batch.render('Foo');\n \n Scheduler.flushAll();\n \n@@ -248,7 +242,7 @@ describe('ReactDOMRoot', () => {\n \n it('can commit an empty batch', () => {\n const root = ReactDOM.unstable_createRoot(container);\n- root.render(1<\/ConcurrentMode>);\n+ root.render(1);\n \n Scheduler.advanceTime(2000);\n \/\/ This batch has a later expiration time than the earlier update.\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationModes-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationModes-test.js\nindex 3a4abc6abb..b9f8a5c48c 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationModes-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationModes-test.js\n@@ -103,72 +103,4 @@ describe('ReactDOMServerIntegration', () => {\n expect(await render()).toBe(null);\n });\n });\n-\n- describe('React.unstable_ConcurrentMode', () => {\n- itRenders('an concurrent mode with one child', async render => {\n- let e = await render(\n- \n-

text1<\/div>\n- <\/React.unstable_ConcurrentMode>,\n- );\n- let parent = e.parentNode;\n- expect(parent.childNodes[0].tagName).toBe('DIV');\n- });\n-\n- itRenders('an concurrent mode with several children', async render => {\n- let Header = props => {\n- return

header<\/p>;\n- };\n- let Footer = props => {\n- return (\n- \n-

footer<\/h2>\n-

about<\/h3>\n- <\/React.unstable_ConcurrentMode>\n- );\n- };\n- let e = await render(\n- \n-
text1<\/div>\n- text2<\/span>\n-
\n-
\n- <\/React.unstable_ConcurrentMode>,\n- );\n- let parent = e.parentNode;\n- expect(parent.childNodes[0].tagName).toBe('DIV');\n- expect(parent.childNodes[1].tagName).toBe('SPAN');\n- expect(parent.childNodes[2].tagName).toBe('P');\n- expect(parent.childNodes[3].tagName).toBe('H2');\n- expect(parent.childNodes[4].tagName).toBe('H3');\n- });\n-\n- itRenders('a nested concurrent mode', async render => {\n- let e = await render(\n- \n- \n-
text1<\/div>\n- <\/React.unstable_ConcurrentMode>\n- text2<\/span>\n- \n- \n- \n- {null}\n-
\n- <\/React.unstable_ConcurrentMode>\n- {false}\n- <\/React.unstable_ConcurrentMode>\n- <\/React.unstable_ConcurrentMode>\n- <\/React.unstable_ConcurrentMode>,\n- );\n- let parent = e.parentNode;\n- expect(parent.childNodes[0].tagName).toBe('DIV');\n- expect(parent.childNodes[1].tagName).toBe('SPAN');\n- expect(parent.childNodes[2].tagName).toBe('P');\n- });\n-\n- itRenders('an empty concurrent mode', async render => {\n- expect(await render()).toBe(null);\n- });\n- });\n });\ndiff --git a\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\nindex 32f66e8e0c..bce3242e77 100644\n--- a\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\n@@ -374,7 +374,7 @@ describe('SimpleEventPlugin', function() {\n expect(button.textContent).toEqual('Count: 7');\n });\n \n- it('flushes lowest pending interactive priority', () => {\n+ it('flushes discrete updates in order', () => {\n container = document.createElement('div');\n document.body.appendChild(container);\n \n@@ -382,15 +382,21 @@ describe('SimpleEventPlugin', function() {\n class Button extends React.Component {\n state = {lowPriCount: 0};\n render() {\n+ const text = `High-pri count: ${\n+ this.props.highPriCount\n+ }, Low-pri count: ${this.state.lowPriCount}`;\n+ Scheduler.yieldValue(text);\n return (\n (button = el)}\n- onClick={\n- \/\/ Intentionally not using the updater form here\n- () => this.setState({lowPriCount: this.state.lowPriCount + 1})\n- }>\n- High-pri count: {this.props.highPriCount}, Low-pri count:{' '}\n- {this.state.lowPriCount}\n+ onClick={() => {\n+ Scheduler.unstable_next(() => {\n+ this.setState(state => ({\n+ lowPriCount: state.lowPriCount + 1,\n+ }));\n+ });\n+ }}>\n+ {text}\n <\/button>\n );\n }\n@@ -402,19 +408,24 @@ describe('SimpleEventPlugin', function() {\n return (\n this.setState({highPriCount: this.state.highPriCount + 1})\n+ \/\/ Intentionally not using the updater form here, to test\n+ \/\/ that updates are serially processed.\n+ () => {\n+ this.setState({highPriCount: this.state.highPriCount + 1});\n+ }\n }>\n- \n-

dillon1000/react

Files changed