Keep track of inherited hoistables so we can forward them to newly discovered boundaries

sebmarkbage · sebmarkbage · commit 8cf6f471b86b · 2025-05-20T14:42:21.000-04:00
Not just already blocked boundaries.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -5754,15 +5754,22 @@ body {
       renderToPipeableStream(
         <html>
           <body>
-            <SuspenseList revealOrder="forwards">
-              <Suspense fallback="loading foo...">
-                <BlockedOn value="foo">
-                  <link rel="stylesheet" href="foo" precedence="foo" />
-                  foo
+            <Suspense fallback="loading...">
+              <SuspenseList revealOrder="forwards">
+                <Suspense fallback="loading foo...">
+                  <BlockedOn value="foo">
+                    <link rel="stylesheet" href="foo" precedence="foo" />
+                    foo
+                  </BlockedOn>
+                </Suspense>
+                <Suspense fallback="loading bar...">bar</Suspense>
+                <BlockedOn value="bar">
+                  <Suspense fallback="loading baz...">
+                    <BlockedOn value="baz">baz</BlockedOn>
+                  </Suspense>
                 </BlockedOn>
-              </Suspense>
-              <Suspense fallback="loading bar...">bar</Suspense>
-            </SuspenseList>
+              </SuspenseList>
+            </Suspense>
           </body>
         </html>,
       ).pipe(writable);
@@ -5771,17 +5778,53 @@ body {
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head />
+        <body>loading...</body>
+      </html>,
+    );
+
+    // unblock css loading
+    await act(() => {
+      resolveText('foo');
+    });
+
+    // bar is still blocking the whole list
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
+        <body>
+          {'loading...'}
+          <link as="style" href="foo" rel="preload" />
+        </body>
+      </html>,
+    );
+
+    // unblock inner loading states
+    await act(() => {
+      resolveText('bar');
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-precedence="foo" />
+        </head>
         <body>
           {'loading foo...'}
           {'loading bar...'}
+          {'loading baz...'}
+          <link as="style" href="foo" rel="preload" />
         </body>
       </html>,
     );
 
+    // resolve the last boundary
     await act(() => {
-      resolveText('foo');
+      resolveText('baz');
     });
 
+    // still blocked on the css of the first row
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
         <head>
@@ -5790,6 +5833,7 @@ body {
         <body>
           {'loading foo...'}
           {'loading bar...'}
+          {'loading baz...'}
           <link as="style" href="foo" rel="preload" />
         </body>
       </html>,
@@ -5807,6 +5851,7 @@ body {
         <body>
           {'foo'}
           {'bar'}
+          {'baz'}
           <link as="style" href="foo" rel="preload" />
         </body>
       </html>,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
@@ -237,6 +237,7 @@ type SuspenseListRow = {
   pendingTasks: number, // The number of tasks, previous rows and inner suspense boundaries blocking this row.
   boundaries: null | Array<SuspenseBoundary>, // The boundaries in this row waiting to be unblocked by the previous row. (null means this row is not blocked)
   hoistables: HoistableState, // Any dependencies that this row depends on. Future rows need to also depend on it.
+  inheritedHoistables: null | HoistableState, // Any dependencies that previous row depend on, that new boundaries of this row needs.
   together: boolean, // All the boundaries within this row must be revealed together.
   next: null | SuspenseListRow, // The next row blocked by this one.
 };
@@ -791,6 +792,10 @@ function createSuspenseBoundary(
       boundary.pendingTasks++;
       blockedBoundaries.push(boundary);
     }
+    const inheritedHoistables = row.inheritedHoistables;
+    if (inheritedHoistables !== null) {
+      hoistHoistables(boundary.contentState, inheritedHoistables);
+    }
   }
   return boundary;
 }
@@ -1691,6 +1696,10 @@ function unblockSuspenseListRow(
       // Hoist any hoistables from the previous row into the next row so that it can be
       // later transferred to all the rows.
       hoistHoistables(unblockedRow.hoistables, inheritedHoistables);
+      // Mark the row itself for any newly discovered Suspense boundaries to inherit.
+      // This is different from hoistables because that also includes hoistables from
+      // all the boundaries below this row and not just previous rows.
+      unblockedRow.inheritedHoistables = inheritedHoistables;
     }
     // Unblocking the boundaries will decrement the count of this row but we keep it above
     // zero so they never finish this row recursively.
@@ -1751,6 +1760,7 @@ function createSuspenseListRow(
     pendingTasks: 1, // At first the row is blocked on attempting rendering itself.
     boundaries: null,
     hoistables: createHoistableState(),
+    inheritedHoistables: null,
     together: false,
     next: null,
   };
