Remove <ConcurrentMode /> (#15532)

Use createSyncRoot instead.

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(
-  <React.unstable_ConcurrentMode>
-    <App />
-  </React.unstable_ConcurrentMode>,
-  container
-);
+const root = ReactDOM.unstable_createRoot(container);
+root.render(<App />, container);

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(
-      <ConcurrentMode>
-        <Counter />
-      </ConcurrentMode>,
-      container,
-    );
+    const root = ReactDOM.unstable_createRoot(container);
+    root.render(<Counter />);
+    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(
-        <ConcurrentMode>
-          <div>Hi</div>
-        </ConcurrentMode>,
-        container,
-      );
-      expect(container.textContent).toEqual('Hi');
-
-      ReactDOM.render(
-        <ConcurrentMode>
-          <div>Bye</div>
-        </ConcurrentMode>,
-        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(<div>Hi</div>);
       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 <div>{this.state.step}</div>;
-        }
-      }
-
-      ReactDOM.render(
-        <ConcurrentMode>
-          <Component />
-        </ConcurrentMode>,
-        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 <div>{this.state.step}</div>;
-        }
-      }
-
-      ReactDOM.render(
-        <div>
-          <ConcurrentMode>
-            <Child />
-          </ConcurrentMode>
-        </div>,
-        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(
-        <ConcurrentMode>
-          <Component />
-        </ConcurrentMode>,
-        container,
-      );
+      const root = ReactDOM.unstable_createRoot(container);
+      root.render(<Component />);
       Scheduler.flushAll();
 
       // Updates are async by default
@@ -390,12 +304,9 @@ describe('ReactDOMFiberAsync', () => {
           return this.state.counter;
         }
       }
-      ReactDOM.render(
-        <ConcurrentMode>
-          <Counter />
-        </ConcurrentMode>,
-        container,
-      );
+      const root = ReactDOM.unstable_createRoot(container);
+      root.render(<Counter />);
+      Scheduler.flushAll();
       expect(container.textContent).toEqual('0');
 
       // Test that a normal update is async

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(
-      <React.unstable_ConcurrentMode>
-        <Example inputRef={inputRef} labelRef={labelRef} />
-      </React.unstable_ConcurrentMode>,
-    );
+    root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
 
     Scheduler.flushAll();
 

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(<ConcurrentMode>Hi</ConcurrentMode>);
+    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(<ConcurrentMode>Hi</ConcurrentMode>);
+    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(
-      <ConcurrentMode>
-        <App />
-      </ConcurrentMode>,
-    );
+    batch.render(<App />);
 
     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(<ConcurrentMode>Foo</ConcurrentMode>);
+    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(<ConcurrentMode>1</ConcurrentMode>);
+    root.render(1);
 
     Scheduler.advanceTime(2000);
     // This batch has a later expiration time than the earlier update.

packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js

@@ -103,72 +103,4 @@ describe('ReactDOMServerIntegration', () => {
       expect(await render(<React.StrictMode />)).toBe(null);
     });
   });
-
-  describe('React.unstable_ConcurrentMode', () => {
-    itRenders('an concurrent mode with one child', async render => {
-      let e = await render(
-        <React.unstable_ConcurrentMode>
-          <div>text1</div>
-        </React.unstable_ConcurrentMode>,
-      );
-      let parent = e.parentNode;
-      expect(parent.childNodes[0].tagName).toBe('DIV');
-    });
-
-    itRenders('an concurrent mode with several children', async render => {
-      let Header = props => {
-        return <p>header</p>;
-      };
-      let Footer = props => {
-        return (
-          <React.unstable_ConcurrentMode>
-            <h2>footer</h2>
-            <h3>about</h3>
-          </React.unstable_ConcurrentMode>
-        );
-      };
-      let e = await render(
-        <React.unstable_ConcurrentMode>
-          <div>text1</div>
-          <span>text2</span>
-          <Header />
-          <Footer />
-        </React.unstable_ConcurrentMode>,
-      );
-      let parent = e.parentNode;
-      expect(parent.childNodes[0].tagName).toBe('DIV');
-      expect(parent.childNodes[1].tagName).toBe('SPAN');
-      expect(parent.childNodes[2].tagName).toBe('P');
-      expect(parent.childNodes[3].tagName).toBe('H2');
-      expect(parent.childNodes[4].tagName).toBe('H3');
-    });
-
-    itRenders('a nested concurrent mode', async render => {
-      let e = await render(
-        <React.unstable_ConcurrentMode>
-          <React.unstable_ConcurrentMode>
-            <div>text1</div>
-          </React.unstable_ConcurrentMode>
-          <span>text2</span>
-          <React.unstable_ConcurrentMode>
-            <React.unstable_ConcurrentMode>
-              <React.unstable_ConcurrentMode>
-                {null}
-                <p />
-              </React.unstable_ConcurrentMode>
-              {false}
-            </React.unstable_ConcurrentMode>
-          </React.unstable_ConcurrentMode>
-        </React.unstable_ConcurrentMode>,
-      );
-      let parent = e.parentNode;
-      expect(parent.childNodes[0].tagName).toBe('DIV');
-      expect(parent.childNodes[1].tagName).toBe('SPAN');
-      expect(parent.childNodes[2].tagName).toBe('P');
-    });
-
-    itRenders('an empty concurrent mode', async render => {
-      expect(await render(<React.unstable_ConcurrentMode />)).toBe(null);
-    });
-  });
 });