Dedupe suspense boundaries when it has already been found earlier

Author: sebmarkbage

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -840,4 +840,51 @@ describe('ReactDOMFizzStaticBrowser', () => {
       </div>,
     ]);
   });
+
+  // @gate enablePostpone
+  it('can postpone a boundary after it has already been added', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspense fallback="Loading...">
+              <Postpone />
+            </Suspense>
+            <Postpone />
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    prerendering = false;
+
+    console.log(JSON.stringify(prerendered.postponed, null, 2));
+
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+    );
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await readIntoContainer(resumed);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>{['Hello', 'Hello', 'Hello']}</div>,
+    );
+  });
 });

packages/react-server/src/ReactFizzServer.js

@@ -2490,15 +2490,23 @@ function trackPostpone(
       addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
       return;
     } else {
-      const boundaryNode: ReplaySuspenseBoundary = [
-        boundaryKeyPath[1],
-        boundaryKeyPath[2],
-        children,
-        null,
-        boundary.rootSegmentID,
-      ];
-      trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
-      addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
+      let boundaryNode: void | ReplayNode =
+        trackedPostpones.workingMap.get(boundaryKeyPath);
+      if (boundaryNode === undefined) {
+        boundaryNode = [
+          boundaryKeyPath[1],
+          boundaryKeyPath[2],
+          children,
+          null,
+          boundary.rootSegmentID,
+        ];
+        trackedPostpones.workingMap.set(boundaryKeyPath, boundaryNode);
+        addToReplayParent(boundaryNode, boundaryKeyPath[0], trackedPostpones);
+      } else {
+        // Upgrade to ReplaySuspenseBoundary.
+        ((boundaryNode: any): ReplaySuspenseBoundary)[4] =
+          boundary.rootSegmentID;
+      }
       // Fall through to add the child node.
     }
   }