Lazy components must use React.lazy

Removes support for using arbitrary promises as the type of a React
element. Instead, promises must be wrapped in React.lazy. This gives us
flexibility later if we need to change the protocol.

The reason is that promises do not provide a way to call their
constructor multiple times. For example:

const promiseForA = new Promise(resolve => {
  fetchA(a => resolve(a));
});

Given a reference to `promiseForA`, there's no way to call `fetchA`
again. Calling `then` on the promise doesn't run the constructor again;
it only attaches another listener.

In the future we will likely introduce an API like `React.eager` that
is similar to `lazy` but eagerly calls the constructor. That gives us
the ability to call the constructor multiple times. E.g. to increase
the priority, or to retry if the first operation failed.

Author: acdlite

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

@@ -582,11 +582,6 @@ describe('ReactDOMServer', () => {
       );
       ReactDOMServer.renderToString(<LazyFoo />);
     }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
-
-    expect(() => {
-      const FooPromise = {then() {}};
-      ReactDOMServer.renderToString(<FooPromise />);
-    }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');
   });
 
   it('should throw (in dev) when children are mutated during render', () => {

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

@@ -444,15 +444,18 @@ describe('ReactDOMServerHydration', () => {
   });
 
   it('should be able to use lazy components after hydrating', async () => {
-    const Lazy = new Promise(resolve => {
-      setTimeout(
-        () =>
-          resolve(function World() {
-            return 'world';
-          }),
-        1000,
-      );
-    });
+    const Lazy = React.lazy(
+      () =>
+        new Promise(resolve => {
+          setTimeout(
+            () =>
+              resolve(function World() {
+                return 'world';
+              }),
+            1000,
+          );
+        }),
+    );
     class HelloWorld extends React.Component {
       state = {isClient: false};
       componentDidMount() {

packages/react-reconciler/src/ReactFiber.js

@@ -60,6 +60,7 @@ import {
   REACT_CONCURRENT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
   REACT_PURE_TYPE,
+  REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -461,12 +462,9 @@ export function createFiberFromElement(
             case REACT_PURE_TYPE:
               fiberTag = PureComponent;
               break getTag;
-            default: {
-              if (typeof type.then === 'function') {
-                fiberTag = IndeterminateComponent;
-                break getTag;
-              }
-            }
+            case REACT_LAZY_TYPE:
+              fiberTag = IndeterminateComponent;
+              break getTag;
           }
         }
         let info = '';

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -110,6 +110,7 @@ import {
   createFiberFromFragment,
   createWorkInProgress,
 } from './ReactFiber';
+import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -729,7 +730,7 @@ function mountIndeterminateComponent(
   if (
     typeof Component === 'object' &&
     Component !== null &&
-    typeof Component.then === 'function'
+    Component.$$typeof === REACT_LAZY_TYPE
   ) {
     // We can't start a User Timing measurement with correct label yet.
     // Cancel and resume right after we know the tag.

packages/react-reconciler/src/ReactFiberLazyComponent.js

@@ -7,26 +7,28 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactLazyComponent';
+import type {LazyComponentThenable} from 'shared/ReactLazyComponent';
 
 import {Resolved, Rejected, Pending} from 'shared/ReactLazyComponent';
 
-export function readLazyComponentType<T>(thenable: Thenable<T>): T {
-  const status = thenable._reactStatus;
+export function readLazyComponentType<T>(
+  thenable: LazyComponentThenable<T>,
+): T {
+  const status = thenable._status;
   switch (status) {
     case Resolved:
-      const Component: T = thenable._reactResult;
+      const Component: T = thenable._result;
       return Component;
     case Rejected:
-      throw thenable._reactResult;
+      throw thenable._result;
     case Pending:
       throw thenable;
     default: {
-      thenable._reactStatus = Pending;
+      thenable._status = Pending;
       thenable.then(
         resolvedValue => {
-          if (thenable._reactStatus === Pending) {
-            thenable._reactStatus = Resolved;
+          if (thenable._status === Pending) {
+            thenable._status = Resolved;
             if (typeof resolvedValue === 'object' && resolvedValue !== null) {
               // If the `default` property is not empty, assume it's the result
               // of an async import() and use that. Otherwise, use the
@@ -39,13 +41,13 @@ export function readLazyComponentType<T>(thenable: Thenable<T>): T {
             } else {
               resolvedValue = resolvedValue;
             }
-            thenable._reactResult = resolvedValue;
+            thenable._result = resolvedValue;
           }
         },
         error => {
-          if (thenable._reactStatus === Pending) {
-            thenable._reactStatus = Rejected;
-            thenable._reactResult = error;
+          if (thenable._status === Pending) {
+            thenable._status = Rejected;
+            thenable._result = error;
           }
         },
       );