Apply optimization in render phase before flushing

Author: sebmarkbage

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

@@ -254,6 +254,39 @@ describe('ReactDOMFizSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
+  it('displays all "together" in a single pass', async () => {
+    function Foo() {
+      return (
+        <div>
+          <SuspenseList revealOrder="together">
+            <Suspense fallback={<Text text="Loading A" />}>
+              <Text text="A" />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B" />}>
+              <Text text="B" />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading C" />}>
+              <Text text="C" />
+            </Suspense>
+          </SuspenseList>
+        </div>
+      );
+    }
+
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+    pipe(writable);
+    await 0;
+    const bufferedContent = buffer;
+    buffer = '';
+
+    assertLog(['A', 'B', 'C', 'Loading A', 'Loading B', 'Loading C']);
+
+    expect(bufferedContent).toMatchInlineSnapshot(
+      `"<div><!--$--><span>A</span><!--/$--><!--$--><span>B</span><!--/$--><!--$--><span>C</span><!--/$--></div>"`,
+    );
+  });
+
   // @gate enableSuspenseList
   it('displays all "together" even when nested as siblings', async () => {
     const A = createAsyncText('A');

packages/react-server/src/ReactFizzServer.js

@@ -1405,6 +1405,11 @@ function renderSuspenseBoundary(
           }
           return;
         }
+      } else {
+        const boundaryRow = prevRow;
+        if (boundaryRow !== null && boundaryRow.together) {
+          tryToResolveTogetherRow(request, boundaryRow);
+        }
       }
     } catch (thrownValue: mixed) {
       newBoundary.status = CLIENT_RENDERED;
@@ -1699,6 +1704,34 @@ function unblockSuspenseListRow(
   }
 }
 
+function tryToResolveTogetherRow(
+  request: Request,
+  togetherRow: SuspenseListRow,
+): void {
+  // If we have a "together" row and all the pendingTasks are really the boundaries themselves,
+  // and we won't outline any of them then we can unblock this row early so that we can inline
+  // all the boundaries at once.
+  const boundaries = togetherRow.boundaries;
+  if (boundaries === null || togetherRow.pendingTasks !== boundaries.length) {
+    return;
+  }
+  let allCompleteAndInlinable = true;
+  for (let i = 0; i < boundaries.length; i++) {
+    const rowBoundary = boundaries[i];
+    if (
+      rowBoundary.pendingTasks !== 1 ||
+      rowBoundary.parentFlushed ||
+      isEligibleForOutlining(request, rowBoundary)
+    ) {
+      allCompleteAndInlinable = false;
+      break;
+    }
+  }
+  if (allCompleteAndInlinable) {
+    unblockSuspenseListRow(request, togetherRow);
+  }
+}
+
 function createSuspenseListRow(
   previousRow: null | SuspenseListRow,
 ): SuspenseListRow {
@@ -4787,6 +4820,8 @@ function finishedTask(
   if (row !== null) {
     if (--row.pendingTasks === 0) {
       finishSuspenseListRow(request, row);
+    } else if (row.together) {
+      tryToResolveTogetherRow(request, row);
     }
   }
   request.allPendingTasks--;
@@ -4876,6 +4911,10 @@ function finishedTask(
           }
         }
       }
+      const boundaryRow = boundary.row;
+      if (boundaryRow !== null && boundaryRow.together) {
+        tryToResolveTogetherRow(request, boundaryRow);
+      }
     }
   }
 
@@ -5394,40 +5433,14 @@ function flushSegment(
     return flushSubtree(request, destination, segment, hoistableState);
   }
 
-  const row = boundary.row;
-  if (
-    boundary.status === PENDING &&
-    row !== null &&
-    row.together &&
-    row.boundaries !== null &&
-    row.pendingTasks === row.boundaries.length
-  ) {
-    // If we have a "together" row and all the pendingTasks are really the boundaries themselves,
-    // and we won't outline any of them then we can unblock this row early so that we can inline
-    // all the boundaries at once.
-    let allComplete = true;
-    for (let i = 0; i < row.boundaries.length; i++) {
-      const rowBoundary = row.boundaries[i];
-      if (
-        rowBoundary.pendingTasks !== 1 ||
-        isEligibleForOutlining(request, rowBoundary)
-      ) {
-        allComplete = false;
-        break;
-      }
-    }
-    if (allComplete) {
-      unblockSuspenseListRow(request, row);
-    }
-  }
-
   boundary.parentFlushed = true;
   // This segment is a Suspense boundary. We need to decide whether to
   // emit the content or the fallback now.
   if (boundary.status === CLIENT_RENDERED) {
     // Emit a client rendered suspense boundary wrapper.
     // We never queue the inner boundary so we'll never emit its content or partial segments.
 
+    const row = boundary.row;
     if (row !== null) {
       // Since this boundary end up client rendered, we can unblock future suspense list rows.
       // This means that they may appear out of order if the future rows succeed but this is
@@ -5526,6 +5539,7 @@ function flushSegment(
       hoistHoistables(hoistableState, boundary.contentState);
     }
 
+    const row = boundary.row;
     if (row !== null && isEligibleForOutlining(request, boundary)) {
       // Once we have written the boundary, we can unblock the row and let future
       // rows be written. This may schedule new completed boundaries.