From 0f334553c9558a56037b481fedc9b9fcad3643e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 31 Mar 2020 21:14:59 -0700
Subject: [PATCH] Reset stateNode in resetWorkInProgress (#18448)

* test(SuspenseList): Add failing test for class component

* Reset stateNode when resetWorkInProgress

This is supposed to put the Fiber into the same state as if it was just
created by child fiber reconciliation. For newly created fibers, that means
that stateNode is null.

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
---
 packages/react-reconciler/src/ReactFiber.js   |  2 +
 .../ReactSuspenseList-test.internal.js        | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index f84d7796c99b..ea41e2b10e82 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -542,6 +542,8 @@ export function resetWorkInProgress(
 
     workInProgress.dependencies = null;
 
+    workInProgress.stateNode = null;
+
     if (enableProfilerTimer) {
       // Note: We don't reset the actualTime counts. It's useful to accumulate
       // actual time across multiple render passes.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
index c13c31144828..572f0f8518e8 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
@@ -2485,4 +2485,66 @@ describe('ReactSuspenseList', () => {
       </>,
     );
   });
+
+  it('can resume class components when revealed together', async () => {
+    let A = createAsyncText('A');
+    let B = createAsyncText('B');
+
+    class ClassComponent extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    function Foo() {
+      return (
+        <Suspense fallback={<Text text="Loading" />}>
+          <SuspenseList revealOrder="together">
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading A" />}>
+                <A />
+              </Suspense>
+            </ClassComponent>
+            <ClassComponent>
+              <Suspense fallback={<Text text="Loading B" />}>
+                <B />
+              </Suspense>
+            </ClassComponent>
+          </SuspenseList>
+        </Suspense>
+      );
+    }
+
+    await A.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+      'Loading A',
+      'Loading B',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    ReactNoop.render(<Foo />);
+
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+      </>,
+    );
+  });
 });