Support sync thenables for lazy() (#14626)

* Support sync thenables for lazy()

* Don't commit twice

Author: gaearon

packages/react-reconciler/src/ReactFiberLazyComponent.js

@@ -47,6 +47,7 @@ export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
       lazyComponent._status = Pending;
       const ctor = lazyComponent._ctor;
       const thenable = ctor();
+      lazyComponent._result = thenable;
       thenable.then(
         moduleObject => {
           if (lazyComponent._status === Pending) {
@@ -73,7 +74,10 @@ export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
           }
         },
       );
-      lazyComponent._result = thenable;
+      // Check if it resolved synchronously
+      if (lazyComponent._status === Resolved) {
+        return lazyComponent._result;
+      }
       throw thenable;
     }
   }

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -61,6 +61,23 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('Hi again');
   });
 
+  it('can resolve synchronously without suspending', async () => {
+    const LazyText = lazy(() => ({
+      then(cb) {
+        cb({default: Text});
+      },
+    }));
+
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyText text="Hi" />
+      </Suspense>,
+    );
+
+    expect(ReactTestRenderer).toHaveYielded(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
   it('multiple lazy components', async () => {
     function Foo() {
       return <Text text="Foo" />;