Lazy components must use React.lazy (facebook#13885)

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.

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-dom/src/server/ReactPartialRenderer.js

@@ -38,6 +38,7 @@ import {
   REACT_PROFILER_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
+  REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
 import {
@@ -1005,14 +1006,11 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          default:
-            if (typeof elementType.then === 'function') {
-              invariant(
-                false,
-                'ReactDOMServer does not yet support lazy-loaded components.',
-              );
-            }
-            break;
+          case REACT_LAZY_TYPE:
+            invariant(
+              false,
+              'ReactDOMServer does not yet support lazy-loaded components.',
+            );
         }
       }
 

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

@@ -104,12 +104,13 @@ import {
   updateClassInstance,
 } from './ReactFiberClassComponent';
 import {readLazyComponentType} from './ReactFiberLazyComponent';
-import {getResultFromResolvedThenable} from 'shared/ReactLazyComponent';
+import {getResultFromResolvedLazyComponent} from 'shared/ReactLazyComponent';
 import {
   resolveLazyComponentTag,
   createFiberFromFragment,
   createWorkInProgress,
 } from './ReactFiber';
+import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -728,7 +729,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.
@@ -1422,7 +1423,7 @@ function beginWork(
         }
         case ClassComponentLazy: {
           const thenable = workInProgress.type;
-          const Component = getResultFromResolvedThenable(thenable);
+          const Component = getResultFromResolvedLazyComponent(thenable);
           if (isLegacyContextProvider(Component)) {
             pushLegacyContextProvider(workInProgress);
           }
@@ -1498,7 +1499,7 @@ function beginWork(
     }
     case FunctionComponentLazy: {
       const thenable = workInProgress.type;
-      const Component = getResultFromResolvedThenable(thenable);
+      const Component = getResultFromResolvedLazyComponent(thenable);
       const unresolvedProps = workInProgress.pendingProps;
       const child = updateFunctionComponent(
         current,
@@ -1523,7 +1524,7 @@ function beginWork(
     }
     case ClassComponentLazy: {
       const thenable = workInProgress.type;
-      const Component = getResultFromResolvedThenable(thenable);
+      const Component = getResultFromResolvedLazyComponent(thenable);
       const unresolvedProps = workInProgress.pendingProps;
       const child = updateClassComponent(
         current,
@@ -1565,7 +1566,7 @@ function beginWork(
     }
     case ForwardRefLazy: {
       const thenable = workInProgress.type;
-      const Component = getResultFromResolvedThenable(thenable);
+      const Component = getResultFromResolvedLazyComponent(thenable);
       const unresolvedProps = workInProgress.pendingProps;
       const child = updateForwardRef(
         current,
@@ -1608,7 +1609,7 @@ function beginWork(
     }
     case PureComponentLazy: {
       const thenable = workInProgress.type;
-      const Component = getResultFromResolvedThenable(thenable);
+      const Component = getResultFromResolvedLazyComponent(thenable);
       const unresolvedProps = workInProgress.pendingProps;
       const child = updatePureComponent(
         current,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -42,7 +42,7 @@ import {
 } from 'shared/ReactWorkTags';
 import {Placement, Ref, Update} from 'shared/ReactSideEffectTags';
 import invariant from 'shared/invariant';
-import {getResultFromResolvedThenable} from 'shared/ReactLazyComponent';
+import {getResultFromResolvedLazyComponent} from 'shared/ReactLazyComponent';
 
 import {
   createInstance,
@@ -552,7 +552,7 @@ function completeWork(
       break;
     }
     case ClassComponentLazy: {
-      const Component = getResultFromResolvedThenable(workInProgress.type);
+      const Component = getResultFromResolvedLazyComponent(workInProgress.type);
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }

packages/react-reconciler/src/ReactFiberContext.js

@@ -20,7 +20,7 @@ import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
 import checkPropTypes from 'prop-types/checkPropTypes';
-import {getResultFromResolvedThenable} from 'shared/ReactLazyComponent';
+import {getResultFromResolvedLazyComponent} from 'shared/ReactLazyComponent';
 
 import * as ReactCurrentFiber from './ReactCurrentFiber';
 import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
@@ -298,7 +298,7 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
         break;
       }
       case ClassComponentLazy: {
-        const Component = getResultFromResolvedThenable(node.type);
+        const Component = getResultFromResolvedLazyComponent(node.type);
         if (isContextProvider(Component)) {
           return node.stateNode.__reactInternalMemoizedMergedChildContext;
         }

packages/react-reconciler/src/ReactFiberLazyComponent.js

@@ -7,26 +7,28 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactLazyComponent';
+import type {LazyComponent} 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>(lazyComponent: LazyComponent<T>): T {
+  const status = lazyComponent._status;
   switch (status) {
     case Resolved:
-      const Component: T = thenable._reactResult;
+      const Component: T = lazyComponent._result;
       return Component;
     case Rejected:
-      throw thenable._reactResult;
+      throw lazyComponent._result;
     case Pending:
-      throw thenable;
+      throw lazyComponent;
     default: {
-      thenable._reactStatus = Pending;
+      lazyComponent._status = Pending;
+      const ctor = lazyComponent._ctor;
+      const thenable = ctor();
       thenable.then(
         resolvedValue => {
-          if (thenable._reactStatus === Pending) {
-            thenable._reactStatus = Resolved;
+          if (lazyComponent._status === Pending) {
+            lazyComponent._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;
+            lazyComponent._result = resolvedValue;
           }
         },
         error => {
-          if (thenable._reactStatus === Pending) {
-            thenable._reactStatus = Rejected;
-            thenable._reactResult = error;
+          if (lazyComponent._status === Pending) {
+            lazyComponent._status = Rejected;
+            lazyComponent._result = error;
           }
         },
       );

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -31,7 +31,7 @@ import {
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import {getResultFromResolvedThenable} from 'shared/ReactLazyComponent';
+import {getResultFromResolvedLazyComponent} from 'shared/ReactLazyComponent';
 
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -107,7 +107,7 @@ function getContextForSubtree(
       return processChildContext(fiber, Component, parentContext);
     }
   } else if (fiber.tag === ClassComponentLazy) {
-    const Component = getResultFromResolvedThenable(fiber.type);
+    const Component = getResultFromResolvedLazyComponent(fiber.type);
     if (isLegacyContextProvider(Component)) {
       return processChildContext(fiber, Component, parentContext);
     }

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -53,7 +53,7 @@ import {
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import {getResultFromResolvedThenable} from 'shared/ReactLazyComponent';
+import {getResultFromResolvedLazyComponent} from 'shared/ReactLazyComponent';
 
 import {
   scheduleTimeout,
@@ -312,7 +312,9 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         break;
       }
       case ClassComponentLazy: {
-        const Component = getResultFromResolvedThenable(failedUnitOfWork.type);
+        const Component = getResultFromResolvedLazyComponent(
+          failedUnitOfWork.type,
+        );
         if (isLegacyContextProvider(Component)) {
           popLegacyContext(failedUnitOfWork);
         }