diff --git a/fixtures/unstable-async/time-slicing/src/index.js b/fixtures/unstable-async/time-slicing/src/index.js index 6e23aba0cab2..dc8890617229 100644 --- a/fixtures/unstable-async/time-slicing/src/index.js +++ b/fixtures/unstable-async/time-slicing/src/index.js @@ -1,6 +1,6 @@ import React, {PureComponent} from 'react'; -import {flushSync, render} from 'react-dom'; -import {unstable_scheduleCallback} from 'scheduler'; +import {flushSync, unstable_createRoot} from 'react-dom'; +import Scheduler from 'scheduler'; import _ from 'lodash'; import Charts from './Charts'; import Clock from './Clock'; @@ -67,7 +67,7 @@ class App extends PureComponent { } this._ignoreClick = true; - unstable_scheduleCallback(() => { + Scheduler.unstable_next(() => { this.setState({showDemo: true}, () => { this._ignoreClick = false; }); @@ -146,9 +146,5 @@ class App extends PureComponent { } const container = document.getElementById('root'); -render( - - - , - container -); +const root = ReactDOM.unstable_createRoot(container); +root.render(, container); diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js index 9ed2c641cdd1..d816845a0de6 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js @@ -16,8 +16,6 @@ let ReactFeatureFlags = require('shared/ReactFeatureFlags'); let ReactDOM; let Scheduler; -const ConcurrentMode = React.unstable_ConcurrentMode; - const setUntrackedInputValue = Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value', @@ -86,12 +84,9 @@ describe('ReactDOMFiberAsync', () => { ); } } - ReactDOM.render( - - - , - container, - ); + const root = ReactDOM.unstable_createRoot(container); + root.render(); + Scheduler.flushAll(); expect(asyncValueRef.current.textContent).toBe(''); expect(syncValueRef.current.textContent).toBe(''); @@ -108,34 +103,7 @@ describe('ReactDOMFiberAsync', () => { expect(syncValueRef.current.textContent).toBe('hello'); }); - describe('with feature flag disabled', () => { - beforeEach(() => { - jest.resetModules(); - ReactFeatureFlags = require('shared/ReactFeatureFlags'); - ReactDOM = require('react-dom'); - Scheduler = require('scheduler'); - }); - - it('renders synchronously', () => { - ReactDOM.render( - -
Hi
-
, - container, - ); - expect(container.textContent).toEqual('Hi'); - - ReactDOM.render( - -
Bye
-
, - container, - ); - expect(container.textContent).toEqual('Bye'); - }); - }); - - describe('with feature flag enabled', () => { + describe('concurrent mode', () => { beforeEach(() => { jest.resetModules(); ReactFeatureFlags = require('shared/ReactFeatureFlags'); @@ -144,7 +112,7 @@ describe('ReactDOMFiberAsync', () => { Scheduler = require('scheduler'); }); - it('createRoot makes the entire tree async', () => { + it('top-level updates are concurrent', () => { const root = ReactDOM.unstable_createRoot(container); root.render(
Hi
); expect(container.textContent).toEqual(''); @@ -157,7 +125,7 @@ describe('ReactDOMFiberAsync', () => { expect(container.textContent).toEqual('Bye'); }); - it('updates inside an async tree are async by default', () => { + it('deep updates (setState) are oncurrent', () => { let instance; class Component extends React.Component { state = {step: 0}; @@ -179,56 +147,6 @@ describe('ReactDOMFiberAsync', () => { expect(container.textContent).toEqual('1'); }); - it('ConcurrentMode creates an async subtree', () => { - let instance; - class Component extends React.Component { - state = {step: 0}; - render() { - instance = this; - return
{this.state.step}
; - } - } - - ReactDOM.render( - - - , - container, - ); - Scheduler.flushAll(); - - instance.setState({step: 1}); - expect(container.textContent).toEqual('0'); - Scheduler.flushAll(); - expect(container.textContent).toEqual('1'); - }); - - it('updates inside an async subtree are async by default', () => { - let instance; - class Child extends React.Component { - state = {step: 0}; - render() { - instance = this; - return
{this.state.step}
; - } - } - - ReactDOM.render( -
- - - -
, - container, - ); - Scheduler.flushAll(); - - instance.setState({step: 1}); - expect(container.textContent).toEqual('0'); - Scheduler.flushAll(); - expect(container.textContent).toEqual('1'); - }); - it('flushSync batches sync updates and flushes them at the end of the batch', () => { let ops = []; let instance; @@ -345,12 +263,8 @@ describe('ReactDOMFiberAsync', () => { } } - ReactDOM.render( - - - , - container, - ); + const root = ReactDOM.unstable_createRoot(container); + root.render(); Scheduler.flushAll(); // Updates are async by default @@ -390,12 +304,9 @@ describe('ReactDOMFiberAsync', () => { return this.state.counter; } } - ReactDOM.render( - - - , - container, - ); + const root = ReactDOM.unstable_createRoot(container); + root.render(); + Scheduler.flushAll(); expect(container.textContent).toEqual('0'); // Test that a normal update is async diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js index 360cfa9f9a39..bc85d18b108c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js @@ -141,7 +141,7 @@ describe('ReactDOMHooks', () => { expect(labelRef.current.innerHTML).toBe('abc'); }); - it('should not bail out when an update is scheduled from within an event handler in ConcurrentMode', () => { + it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', () => { const {createRef, useCallback, useState} = React; const Example = ({inputRef, labelRef}) => { @@ -162,11 +162,7 @@ describe('ReactDOMHooks', () => { const labelRef = createRef(); const root = ReactDOM.unstable_createRoot(container); - root.render( - - - , - ); + root.render(); Scheduler.flushAll(); diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js index 670f45e28bb8..095f44f554c4 100644 --- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js @@ -13,7 +13,6 @@ let React = require('react'); let ReactDOM = require('react-dom'); let ReactDOMServer = require('react-dom/server'); let Scheduler = require('scheduler'); -let ConcurrentMode = React.unstable_ConcurrentMode; describe('ReactDOMRoot', () => { let container; @@ -25,7 +24,6 @@ describe('ReactDOMRoot', () => { ReactDOM = require('react-dom'); ReactDOMServer = require('react-dom/server'); Scheduler = require('scheduler'); - ConcurrentMode = React.unstable_ConcurrentMode; }); it('renders children', () => { @@ -47,7 +45,7 @@ describe('ReactDOMRoot', () => { it('`root.render` returns a thenable work object', () => { const root = ReactDOM.unstable_createRoot(container); - const work = root.render(Hi); + const work = root.render('Hi'); let ops = []; work.then(() => { ops.push('inside callback: ' + container.textContent); @@ -65,7 +63,7 @@ describe('ReactDOMRoot', () => { it('resolves `work.then` callback synchronously if the work already committed', () => { const root = ReactDOM.unstable_createRoot(container); - const work = root.render(Hi); + const work = root.render('Hi'); Scheduler.flushAll(); let ops = []; work.then(() => { @@ -157,11 +155,7 @@ describe('ReactDOMRoot', () => { const root = ReactDOM.unstable_createRoot(container); const batch = root.createBatch(); - batch.render( - - - , - ); + batch.render(); Scheduler.flushAll(); @@ -208,7 +202,7 @@ describe('ReactDOMRoot', () => { it('can wait for a batch to finish', () => { const root = ReactDOM.unstable_createRoot(container); const batch = root.createBatch(); - batch.render(Foo); + batch.render('Foo'); Scheduler.flushAll(); @@ -248,7 +242,7 @@ describe('ReactDOMRoot', () => { it('can commit an empty batch', () => { const root = ReactDOM.unstable_createRoot(container); - root.render(1); + root.render(1); Scheduler.advanceTime(2000); // This batch has a later expiration time than the earlier update. diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js index 3a4abc6abb24..b9f8a5c48c8a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js @@ -103,72 +103,4 @@ describe('ReactDOMServerIntegration', () => { expect(await render()).toBe(null); }); }); - - describe('React.unstable_ConcurrentMode', () => { - itRenders('an concurrent mode with one child', async render => { - let e = await render( - -
text1
-
, - ); - let parent = e.parentNode; - expect(parent.childNodes[0].tagName).toBe('DIV'); - }); - - itRenders('an concurrent mode with several children', async render => { - let Header = props => { - return

header

; - }; - let Footer = props => { - return ( - -

footer

-

about

-
- ); - }; - let e = await render( - -
text1
- text2 -
-