Fix synchronous thenable rejection (facebook#14633)

* Fix handling of sync rejection Reverts facebook#14632 and adds a regression test. * Handle rejection synchronously too Fewer footguns and seems like nicer behavior anyway.
jetoneza · Jan 23, 2019 · 60daa65 · 60daa65
1 parent b96b2c8
commit 60daa65
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/packages/react-reconciler/src/ReactFiberLazyComponent.js
@@ -73,9 +73,12 @@ export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
           }
         },
       );
-      // Check if it resolved synchronously
-      if (lazyComponent._status === Resolved) {
-        return lazyComponent._result;
+      // Handle synchronous thenables.
+      switch (lazyComponent._status) {
+        case Resolved:
+          return lazyComponent._result;
+        case Rejected:
+          throw 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,36 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
+  it('can reject synchronously without suspending', 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>,
+    );
+    expect(ReactTestRenderer).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Error: oh no');
+  });
+
   it('multiple lazy components', async () => {
     function Foo() {
       return <Text text="Foo" />;