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;
 constctor=lazyComponent._ctor;
 constthenable=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){
+returnlazyComponent._result;
+}
 throwthenable;
 }
 }

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()=>{
+constLazyText=lazy(()=>({
+then(cb){
+cb({default: Text});
+},
+}));
+
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyTexttext="Hi"/>
+</Suspense>,
+);
+
+expect(ReactTestRenderer).toHaveYielded(['Hi']);
+expect(root).toMatchRenderedOutput('Hi');
+});
+
 it('multiple lazy components',async()=>{
 functionFoo(){
 return<Texttext="Foo"/>;