Rename AsyncMode -> ConcurrentMode (#13732)

* Rename AsyncMode -> ConcurrentMode

fixtures/unstable-async/time-slicing/src/index.js

@@ -147,8 +147,8 @@ class App extends PureComponent {
 
 const container = document.getElementById('root');
 render(
-  <React.unstable_AsyncMode>
+  <React.unstable_ConcurrentMode>
     <App />
-  </React.unstable_AsyncMode>,
+  </React.unstable_ConcurrentMode>,
   container
 );

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js

@@ -14,7 +14,7 @@ let ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 let ReactDOM;
 
-const AsyncMode = React.unstable_AsyncMode;
+const ConcurrentMode = React.unstable_ConcurrentMode;
 
 const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
   HTMLInputElement.prototype,
@@ -108,9 +108,9 @@ describe('ReactDOMFiberAsync', () => {
       }
     }
     ReactDOM.render(
-      <AsyncMode>
+      <ConcurrentMode>
         <Counter />
-      </AsyncMode>,
+      </ConcurrentMode>,
       container,
     );
     expect(asyncValueRef.current.textContent).toBe('');
@@ -137,17 +137,17 @@ describe('ReactDOMFiberAsync', () => {
 
     it('renders synchronously', () => {
       ReactDOM.render(
-        <AsyncMode>
+        <ConcurrentMode>
           <div>Hi</div>
-        </AsyncMode>,
+        </ConcurrentMode>,
         container,
       );
       expect(container.textContent).toEqual('Hi');
 
       ReactDOM.render(
-        <AsyncMode>
+        <ConcurrentMode>
           <div>Bye</div>
-        </AsyncMode>,
+        </ConcurrentMode>,
         container,
       );
       expect(container.textContent).toEqual('Bye');
@@ -197,7 +197,7 @@ describe('ReactDOMFiberAsync', () => {
       expect(container.textContent).toEqual('1');
     });
 
-    it('AsyncMode creates an async subtree', () => {
+    it('ConcurrentMode creates an async subtree', () => {
       let instance;
       class Component extends React.Component {
         state = {step: 0};
@@ -208,9 +208,9 @@ describe('ReactDOMFiberAsync', () => {
       }
 
       ReactDOM.render(
-        <AsyncMode>
+        <ConcurrentMode>
           <Component />
-        </AsyncMode>,
+        </ConcurrentMode>,
         container,
       );
       jest.runAllTimers();
@@ -233,9 +233,9 @@ describe('ReactDOMFiberAsync', () => {
 
       ReactDOM.render(
         <div>
-          <AsyncMode>
+          <ConcurrentMode>
             <Child />
-          </AsyncMode>
+          </ConcurrentMode>
         </div>,
         container,
       );
@@ -364,9 +364,9 @@ describe('ReactDOMFiberAsync', () => {
       }
 
       ReactDOM.render(
-        <AsyncMode>
+        <ConcurrentMode>
           <Component />
-        </AsyncMode>,
+        </ConcurrentMode>,
         container,
       );
       jest.runAllTimers();
@@ -409,9 +409,9 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
       ReactDOM.render(
-        <AsyncMode>
+        <ConcurrentMode>
           <Counter />
-        </AsyncMode>,
+        </ConcurrentMode>,
         container,
       );
       expect(container.textContent).toEqual('0');

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

@@ -12,7 +12,7 @@
 let React = require('react');
 let ReactDOM = require('react-dom');
 let ReactDOMServer = require('react-dom/server');
-let AsyncMode = React.unstable_AsyncMode;
+let ConcurrentMode = React.unstable_ConcurrentMode;
 
 describe('ReactDOMRoot', () => {
   let container;
@@ -63,7 +63,7 @@ describe('ReactDOMRoot', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
-    AsyncMode = React.unstable_AsyncMode;
+    ConcurrentMode = React.unstable_ConcurrentMode;
   });
 
   it('renders children', () => {
@@ -85,7 +85,7 @@ describe('ReactDOMRoot', () => {
 
   it('`root.render` returns a thenable work object', () => {
     const root = ReactDOM.unstable_createRoot(container);
-    const work = root.render(<AsyncMode>Hi</AsyncMode>);
+    const work = root.render(<ConcurrentMode>Hi</ConcurrentMode>);
     let ops = [];
     work.then(() => {
       ops.push('inside callback: ' + container.textContent);
@@ -103,7 +103,7 @@ describe('ReactDOMRoot', () => {
 
   it('resolves `work.then` callback synchronously if the work already committed', () => {
     const root = ReactDOM.unstable_createRoot(container);
-    const work = root.render(<AsyncMode>Hi</AsyncMode>);
+    const work = root.render(<ConcurrentMode>Hi</ConcurrentMode>);
     jest.runAllTimers();
     let ops = [];
     work.then(() => {
@@ -196,9 +196,9 @@ describe('ReactDOMRoot', () => {
     const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     batch.render(
-      <AsyncMode>
+      <ConcurrentMode>
         <App />
-      </AsyncMode>,
+      </ConcurrentMode>,
     );
 
     jest.runAllTimers();
@@ -246,7 +246,7 @@ describe('ReactDOMRoot', () => {
   it('can wait for a batch to finish', () => {
     const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
-    batch.render(<AsyncMode>Foo</AsyncMode>);
+    batch.render(<ConcurrentMode>Foo</ConcurrentMode>);
 
     jest.runAllTimers();
 
@@ -286,7 +286,7 @@ describe('ReactDOMRoot', () => {
 
   it('can commit an empty batch', () => {
     const root = ReactDOM.unstable_createRoot(container);
-    root.render(<AsyncMode>1</AsyncMode>);
+    root.render(<ConcurrentMode>1</ConcurrentMode>);
 
     advanceCurrentTime(2000);
     // This batch has a later expiration time than the earlier update.

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

@@ -104,36 +104,36 @@ describe('ReactDOMServerIntegration', () => {
     });
   });
 
-  describe('React.unstable_AsyncMode', () => {
-    itRenders('an async mode with one child', async render => {
+  describe('React.unstable_ConcurrentMode', () => {
+    itRenders('an concurrent mode with one child', async render => {
       let e = await render(
-        <React.unstable_AsyncMode>
+        <React.unstable_ConcurrentMode>
           <div>text1</div>
-        </React.unstable_AsyncMode>,
+        </React.unstable_ConcurrentMode>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
     });
 
-    itRenders('an async mode with several children', async render => {
+    itRenders('an concurrent mode with several children', async render => {
       let Header = props => {
         return <p>header</p>;
       };
       let Footer = props => {
         return (
-          <React.unstable_AsyncMode>
+          <React.unstable_ConcurrentMode>
             <h2>footer</h2>
             <h3>about</h3>
-          </React.unstable_AsyncMode>
+          </React.unstable_ConcurrentMode>
         );
       };
       let e = await render(
-        <React.unstable_AsyncMode>
+        <React.unstable_ConcurrentMode>
           <div>text1</div>
           <span>text2</span>
           <Header />
           <Footer />
-        </React.unstable_AsyncMode>,
+        </React.unstable_ConcurrentMode>,
       );
       let parent = e.parentNode;
       expect(parent.childNodes[0].tagName).toBe('DIV');
@@ -143,32 +143,32 @@ describe('ReactDOMServerIntegration', () => {
       expect(parent.childNodes[4].tagName).toBe('H3');
     });
 
-    itRenders('a nested async mode', async render => {
+    itRenders('a nested concurrent mode', async render => {
       let e = await render(
-        <React.unstable_AsyncMode>
-          <React.unstable_AsyncMode>
+        <React.unstable_ConcurrentMode>
+          <React.unstable_ConcurrentMode>
             <div>text1</div>
-          </React.unstable_AsyncMode>
+          </React.unstable_ConcurrentMode>
           <span>text2</span>
-          <React.unstable_AsyncMode>
-            <React.unstable_AsyncMode>
-              <React.unstable_AsyncMode>
+          <React.unstable_ConcurrentMode>
+            <React.unstable_ConcurrentMode>
+              <React.unstable_ConcurrentMode>
                 {null}
                 <p />
-              </React.unstable_AsyncMode>
+              </React.unstable_ConcurrentMode>
               {false}
-            </React.unstable_AsyncMode>
-          </React.unstable_AsyncMode>
-        </React.unstable_AsyncMode>,
+            </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 async mode', async render => {
-      expect(await render(<React.unstable_AsyncMode />)).toBe(null);
+    itRenders('an empty concurrent mode', async render => {
+      expect(await render(<React.unstable_ConcurrentMode />)).toBe(null);
     });
   });
 });

packages/react-dom/src/client/ReactDOM.js

@@ -330,8 +330,12 @@ ReactWork.prototype._onCommit = function(): void {
   }
 };
 
-function ReactRoot(container: Container, isAsync: boolean, hydrate: boolean) {
-  const root = DOMRenderer.createContainer(container, isAsync, hydrate);
+function ReactRoot(
+  container: Container,
+  isConcurrent: boolean,
+  hydrate: boolean,
+) {
+  const root = DOMRenderer.createContainer(container, isConcurrent, hydrate);
   this._internalRoot = root;
 }
 ReactRoot.prototype.render = function(
@@ -497,8 +501,8 @@ function legacyCreateRootFromDOMContainer(
     }
   }
   // Legacy roots are not async by default.
-  const isAsync = false;
-  return new ReactRoot(container, isAsync, shouldHydrate);
+  const isConcurrent = false;
+  return new ReactRoot(container, isConcurrent, shouldHydrate);
 }
 
 function legacyRenderSubtreeIntoContainer(

packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js

@@ -426,9 +426,9 @@ describe('SimpleEventPlugin', function() {
                 // Intentionally not using the updater form here
                 () => this.setState({highPriCount: this.state.highPriCount + 1})
               }>
-              <React.unstable_AsyncMode>
+              <React.unstable_ConcurrentMode>
                 <Button highPriCount={this.state.highPriCount} />
-              </React.unstable_AsyncMode>
+              </React.unstable_ConcurrentMode>
             </div>
           );
         }

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -32,7 +32,7 @@ import {
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_STRICT_MODE_TYPE,
-  REACT_ASYNC_MODE_TYPE,
+  REACT_CONCURRENT_MODE_TYPE,
   REACT_PLACEHOLDER_TYPE,
   REACT_PORTAL_TYPE,
   REACT_PROFILER_TYPE,
@@ -896,7 +896,7 @@ class ReactDOMServerRenderer {
 
       switch (elementType) {
         case REACT_STRICT_MODE_TYPE:
-        case REACT_ASYNC_MODE_TYPE:
+        case REACT_CONCURRENT_MODE_TYPE:
         case REACT_PROFILER_TYPE:
         case REACT_FRAGMENT_TYPE: {
           const nextChildren = toArray(

packages/react-is/README.md

@@ -44,14 +44,14 @@ ReactIs.isValidElementType(React.createFactory("div")); // true
 
 ### Determining an Element's Type
 
-#### AsyncMode
+#### ConcurrentMode
 
 ```js
 import React from "react";
 import * as ReactIs from 'react-is';
 
-ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
-ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true
+ReactIs.isConcurrentMode(<React.unstable_ConcurrentMode />); // true
+ReactIs.typeOf(<React.unstable_ConcurrentMode />) === ReactIs.ConcurrentMode; // true
 ```
 
 #### Context