Fix handling of sync rejection

Reverts facebook#14632 and adds a regression test.
gaearon · Jan 18, 2019 · afbd59a · afbd59a
1 parent a2fa6eb
commit afbd59a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/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) {
@@ -77,7 +78,6 @@ export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
       if (lazyComponent._status === Resolved) {
         return lazyComponent._result;
       }
-      lazyComponent._result = thenable;
       throw thenable;
     }
   }

diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -78,6 +78,37 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
+  it('can handle synchronous thenable rejection', async () => {
+    const LazyText = lazy(() => ({
+      then(resolve, reject) {
+        reject(new Error('oh no'));
+      },
+    }));
+
+    class ErrorBoundary extends React.Component {
+      state = {};
+      static getDerivedStateFromError(error) {
+        return {message: error.message};
+      }
+      render() {
+        return this.state.message
+          ? `Error: ${this.state.message}`
+          : this.props.children;
+      }
+    }
+
+    const root = ReactTestRenderer.create(
+      <ErrorBoundary>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <LazyText text="Hi" />
+        </Suspense>
+      </ErrorBoundary>,
+    );
+    // TODO: ideally we could make it skip this commit.
+    expect(ReactTestRenderer).toHaveYielded(['Loading...']);
+    expect(root).toMatchRenderedOutput('Error: oh no');
+  });
+
   it('multiple lazy components', async () => {
     function Foo() {
       return <Text text="Foo" />;