Skip to content

Commit c66e342

Browse files
committed
[Fizz] Batch Suspense Boundary Reveal with Throttle (#33076)
Stacked on #33073. React semantics is that Suspense boundaries reveal with a throttle (300ms). That helps avoid flashing reveals when a stream reveals many individual steps back to back. It can also improve overall performance by batching the layout and paint work that has to happen at each step. Unfortunately we never implemented this for SSR streaming - only for client navigations. This is highly noticeable on very dynamic sites with lots of Suspense boundaries. It can look good with a client nav but feel glitchy when you reload the page or initial load. This fixes the Fizz runtime to be throttled and reveals batched into a single paint at a time. We do this by first tracking the last paint after the complete (this will be the first paint if `rel="expect"` is respected). Then in the `completeBoundary` operation we queue the operation and then flush it all into a throttled batch. Another motivation is that View Transitions need to operate as a batch and individual steps get queued in a sequence so it's extra important to include as much content as possible in each animated step. This will be done in a follow up for SSR View Transitions. DiffTrain build for [ee7fee8](ee7fee8)
1 parent 8aa59d1 commit c66e342

37 files changed

+472
-296
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ee077b6ccddd916440bb7570ba6f53673d920700
1+
ee7fee8f8875052afde53c5bfc8aedad43ff9d8e
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ee077b6ccddd916440bb7570ba6f53673d920700
1+
ee7fee8f8875052afde53c5bfc8aedad43ff9d8e

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1538,7 +1538,7 @@ __DEV__ &&
15381538
exports.useTransition = function () {
15391539
return resolveDispatcher().useTransition();
15401540
};
1541-
exports.version = "19.2.0-www-classic-ee077b6c-20250501";
1541+
exports.version = "19.2.0-www-classic-ee7fee8f-20250501";
15421542
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15431543
"function" ===
15441544
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1538,7 +1538,7 @@ __DEV__ &&
15381538
exports.useTransition = function () {
15391539
return resolveDispatcher().useTransition();
15401540
};
1541-
exports.version = "19.2.0-www-modern-ee077b6c-20250501";
1541+
exports.version = "19.2.0-www-modern-ee7fee8f-20250501";
15421542
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15431543
"function" ===
15441544
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -636,4 +636,4 @@ exports.useSyncExternalStore = function (
636636
exports.useTransition = function () {
637637
return ReactSharedInternals.H.useTransition();
638638
};
639-
exports.version = "19.2.0-www-classic-ee077b6c-20250501";
639+
exports.version = "19.2.0-www-classic-ee7fee8f-20250501";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -636,4 +636,4 @@ exports.useSyncExternalStore = function (
636636
exports.useTransition = function () {
637637
return ReactSharedInternals.H.useTransition();
638638
};
639-
exports.version = "19.2.0-www-modern-ee077b6c-20250501";
639+
exports.version = "19.2.0-www-modern-ee7fee8f-20250501";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,7 @@ exports.useSyncExternalStore = function (
640640
exports.useTransition = function () {
641641
return ReactSharedInternals.H.useTransition();
642642
};
643-
exports.version = "19.2.0-www-classic-ee077b6c-20250501";
643+
exports.version = "19.2.0-www-classic-ee7fee8f-20250501";
644644
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
645645
"function" ===
646646
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,7 @@ exports.useSyncExternalStore = function (
640640
exports.useTransition = function () {
641641
return ReactSharedInternals.H.useTransition();
642642
};
643-
exports.version = "19.2.0-www-modern-ee077b6c-20250501";
643+
exports.version = "19.2.0-www-modern-ee7fee8f-20250501";
644644
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
645645
"function" ===
646646
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19014,10 +19014,10 @@ __DEV__ &&
1901419014
(function () {
1901519015
var internals = {
1901619016
bundleType: 1,
19017-
version: "19.2.0-www-classic-ee077b6c-20250501",
19017+
version: "19.2.0-www-classic-ee7fee8f-20250501",
1901819018
rendererPackageName: "react-art",
1901919019
currentDispatcherRef: ReactSharedInternals,
19020-
reconcilerVersion: "19.2.0-www-classic-ee077b6c-20250501"
19020+
reconcilerVersion: "19.2.0-www-classic-ee7fee8f-20250501"
1902119021
};
1902219022
internals.overrideHookState = overrideHookState;
1902319023
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19051,7 +19051,7 @@ __DEV__ &&
1905119051
exports.Shape = Shape;
1905219052
exports.Surface = Surface;
1905319053
exports.Text = Text;
19054-
exports.version = "19.2.0-www-classic-ee077b6c-20250501";
19054+
exports.version = "19.2.0-www-classic-ee7fee8f-20250501";
1905519055
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1905619056
"function" ===
1905719057
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18786,10 +18786,10 @@ __DEV__ &&
1878618786
(function () {
1878718787
var internals = {
1878818788
bundleType: 1,
18789-
version: "19.2.0-www-modern-ee077b6c-20250501",
18789+
version: "19.2.0-www-modern-ee7fee8f-20250501",
1879018790
rendererPackageName: "react-art",
1879118791
currentDispatcherRef: ReactSharedInternals,
18792-
reconcilerVersion: "19.2.0-www-modern-ee077b6c-20250501"
18792+
reconcilerVersion: "19.2.0-www-modern-ee7fee8f-20250501"
1879318793
};
1879418794
internals.overrideHookState = overrideHookState;
1879518795
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -18823,7 +18823,7 @@ __DEV__ &&
1882318823
exports.Shape = Shape;
1882418824
exports.Surface = Surface;
1882518825
exports.Text = Text;
18826-
exports.version = "19.2.0-www-modern-ee077b6c-20250501";
18826+
exports.version = "19.2.0-www-modern-ee7fee8f-20250501";
1882718827
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1882818828
"function" ===
1882918829
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)