Throttle reveals

sebmarkbage · sebmarkbage · commit d150fa19c460 · 2025-04-30T23:36:12.000-04:00
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
@@ -47,6 +47,8 @@ export function clientRenderBoundary(
   }
 }
 
+const FALLBACK_THROTTLE_MS = 300;
+
 export function completeBoundary(suspenseBoundaryID, contentID) {
   const contentNodeOuter = document.getElementById(contentID);
   if (!contentNodeOuter) {
@@ -69,6 +71,7 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
   }
 
   function revealCompletedBoundaries() {
+    window['$RT'] = performance.now();
     const batch = window['$RB'];
     window['$RB'] = [];
     for (let i = 0; i < batch.length; i += 2) {
@@ -132,7 +135,18 @@ export function completeBoundary(suspenseBoundaryID, contentID) {
   // Queue this boundary for the next batch
   window['$RB'].push(suspenseIdNodeOuter, contentNodeOuter);
 
-  revealCompletedBoundaries();
+  if (window['$RB'].length === 2) {
+    // This is the first time we've pushed to the batch. We need to schedule a callback
+    // to flush the batch. This is delayed by the throttle heuristic.
+    const globalMostRecentFallbackTime =
+      typeof window['$RT'] !== 'number' ? 0 : window['$RT'];
+    const msUntilTimeout =
+      globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - performance.now();
+    // We always schedule the flush in a timer even if it's very low or negative to allow
+    // for multiple completeBoundary calls that are already queued to have a chance to
+    // make the batch.
+    setTimeout(revealCompletedBoundaries, msUntilTimeout);
+  }
 }
 
 export function completeBoundaryWithStyles(
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -209,6 +209,7 @@ describe('ReactDOMFizzServer', () => {
     buffer = '';
 
     if (!bufferedContent) {
+      jest.runAllTimers();
       return;
     }
 
@@ -317,6 +318,8 @@ describe('ReactDOMFizzServer', () => {
       div.innerHTML = bufferedContent;
       await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
     }
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
   }
 
   function resolveText(text) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -125,6 +125,7 @@ describe('ReactDOMFloat', () => {
     buffer = '';
 
     if (!bufferedContent) {
+      jest.runAllTimers();
       return;
     }
 
@@ -233,6 +234,9 @@ describe('ReactDOMFloat', () => {
       div.innerHTML = bufferedContent;
       await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);
     }
+    await 0;
+    // Let throttled boundaries reveal
+    jest.runAllTimers();
   }
 
   function getMeaningfulChildren(element) {
@@ -3612,6 +3616,7 @@ body {
     assertConsoleErrorDev([
       "Hydration failed because the server rendered HTML didn't match the client.",
     ]);
+    jest.runAllTimers();
 
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
@@ -5205,6 +5210,10 @@ body {
       </html>,
     );
     loadStylesheets();
+    // Let the styles flush and then flush the boundaries
+    await 0;
+    await 0;
+    jest.runAllTimers();
     assertLog([
       'load stylesheet: shell preinit/shell',
       'load stylesheet: shell/shell preinit',

Original file line number	Diff line number	Diff line change
`@@ -209,6 +209,7 @@ describe('ReactDOMFizzServer', () => {`
`209`	`209`	`buffer = '';`
`210`	`210`
`211`	`211`	`if (!bufferedContent) {`
	`212`	`+ jest.runAllTimers();`
`212`	`213`	`return;`
`213`	`214`	`}`
`214`	`215`
`@@ -317,6 +318,8 @@ describe('ReactDOMFizzServer', () => {`
`317`	`318`	`div.innerHTML = bufferedContent;`
`318`	`319`	`await insertNodesAndExecuteScripts(div, streamingContainer, CSPnonce);`
`319`	`320`	`}`
	`321`	`+ // Let throttled boundaries reveal`
	`322`	`+ jest.runAllTimers();`
`320`	`323`	`}`
`321`	`324`
`322`	`325`	`function resolveText(text) {`