Skip to content

Commit 7f00c48

Browse files
sebmarkbagesebmarkbage
committed
[Fizz] Add "Queued" Status to SSR:ed Suspense Boundaries (#33087)
Stacked on #33076. This fixes a bug where we used the "complete" status but the DOMContentLoaded event. This checks for not "loading" instead. We also add a new status where the boundary has been marked as complete by the server but has not yet flushed either due to being throttled, suspended on CSS or animating. DiffTrain build for [0ed6ceb](0ed6ceb)
1 parent e4b4f13 commit 7f00c48

23 files changed

+264
-140
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.2.0-native-fb-408d055a-20250430
1+
19.2.0-native-fb-0ed6ceb9-20250501

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<eb0c2fb053e8b2b413b711d9e5fe95e5>>
10+
* @generated SignedSource<<1eb08f6a09bf7c59a67b2c313eee5a7f>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.2.0-native-fb-408d055a-20250430";
407+
exports.version = "19.2.0-native-fb-0ed6ceb9-20250501";
408408
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<16ef8ed6662e0cc62ba93129183f2c43>>
10+
* @generated SignedSource<<bf3c75b06c4ace9584a6b50cde7f1cec>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-408d055a-20250430";
206+
exports.version = "19.2.0-native-fb-0ed6ceb9-20250501";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<16ef8ed6662e0cc62ba93129183f2c43>>
10+
* @generated SignedSource<<bf3c75b06c4ace9584a6b50cde7f1cec>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.2.0-native-fb-408d055a-20250430";
206+
exports.version = "19.2.0-native-fb-0ed6ceb9-20250501";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<c37abe62052360795fe77beaa1e1a63e>>
10+
* @generated SignedSource<<7c1e0cf917b85f5c89bb7c829d2fefae>>
1111
*/
1212

1313
/*
@@ -6759,7 +6759,7 @@ __DEV__ &&
67596759
null !== state &&
67606760
((state = state.dehydrated),
67616761
null === state ||
6762-
state.data === SUSPENSE_PENDING_START_DATA ||
6762+
isSuspenseInstancePending(state) ||
67636763
isSuspenseInstanceFallback(state))
67646764
)
67656765
return node;
@@ -10277,16 +10277,18 @@ __DEV__ &&
1027710277
),
1027810278
SelectiveHydrationException)
1027910279
);
10280-
JSCompiler_object_inline_componentStack_2562.data ===
10281-
SUSPENSE_PENDING_START_DATA || renderDidSuspendDelayIfPossible();
10280+
isSuspenseInstancePending(
10281+
JSCompiler_object_inline_componentStack_2562
10282+
) || renderDidSuspendDelayIfPossible();
1028210283
workInProgress = retrySuspenseComponentWithoutHydrating(
1028310284
current,
1028410285
workInProgress,
1028510286
renderLanes
1028610287
);
1028710288
} else
10288-
JSCompiler_object_inline_componentStack_2562.data ===
10289-
SUSPENSE_PENDING_START_DATA
10289+
isSuspenseInstancePending(
10290+
JSCompiler_object_inline_componentStack_2562
10291+
)
1029010292
? ((workInProgress.flags |= 192),
1029110293
(workInProgress.child = current.child),
1029210294
(workInProgress = null))
@@ -20841,6 +20843,7 @@ __DEV__ &&
2084120843
} else if (
2084220844
node === SUSPENSE_START_DATA ||
2084320845
node === SUSPENSE_PENDING_START_DATA ||
20846+
node === SUSPENSE_QUEUED_START_DATA ||
2084420847
node === SUSPENSE_FALLBACK_START_DATA ||
2084520848
node === ACTIVITY_START_DATA
2084620849
)
@@ -20893,6 +20896,7 @@ __DEV__ &&
2089320896
else
2089420897
(node !== SUSPENSE_START_DATA &&
2089520898
node !== SUSPENSE_PENDING_START_DATA &&
20899+
node !== SUSPENSE_QUEUED_START_DATA &&
2089620900
node !== SUSPENSE_FALLBACK_START_DATA) ||
2089720901
suspenseInstance++;
2089820902
node = nextNode;
@@ -21132,18 +21136,26 @@ __DEV__ &&
2113221136
}
2113321137
return instance;
2113421138
}
21139+
function isSuspenseInstancePending(instance) {
21140+
return (
21141+
instance.data === SUSPENSE_PENDING_START_DATA ||
21142+
instance.data === SUSPENSE_QUEUED_START_DATA
21143+
);
21144+
}
2113521145
function isSuspenseInstanceFallback(instance) {
2113621146
return (
2113721147
instance.data === SUSPENSE_FALLBACK_START_DATA ||
2113821148
(instance.data === SUSPENSE_PENDING_START_DATA &&
21139-
instance.ownerDocument.readyState === DOCUMENT_READY_STATE_COMPLETE)
21149+
instance.ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING)
2114021150
);
2114121151
}
2114221152
function registerSuspenseInstanceRetry(instance, callback) {
2114321153
var ownerDocument = instance.ownerDocument;
21144-
if (
21154+
if (instance.data === SUSPENSE_QUEUED_START_DATA)
21155+
instance._reactRetry = callback;
21156+
else if (
2114521157
instance.data !== SUSPENSE_PENDING_START_DATA ||
21146-
ownerDocument.readyState === DOCUMENT_READY_STATE_COMPLETE
21158+
ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING
2114721159
)
2114821160
callback();
2114921161
else {
@@ -21165,6 +21177,7 @@ __DEV__ &&
2116521177
nodeType === SUSPENSE_START_DATA ||
2116621178
nodeType === SUSPENSE_FALLBACK_START_DATA ||
2116721179
nodeType === SUSPENSE_PENDING_START_DATA ||
21180+
nodeType === SUSPENSE_QUEUED_START_DATA ||
2116821181
nodeType === ACTIVITY_START_DATA ||
2116921182
nodeType === FORM_STATE_IS_MATCHING ||
2117021183
nodeType === FORM_STATE_IS_NOT_MATCHING
@@ -21229,6 +21242,7 @@ __DEV__ &&
2122921242
(data !== SUSPENSE_START_DATA &&
2123021243
data !== SUSPENSE_FALLBACK_START_DATA &&
2123121244
data !== SUSPENSE_PENDING_START_DATA &&
21245+
data !== SUSPENSE_QUEUED_START_DATA &&
2123221246
data !== ACTIVITY_START_DATA) ||
2123321247
depth++;
2123421248
}
@@ -21245,6 +21259,7 @@ __DEV__ &&
2124521259
data === SUSPENSE_START_DATA ||
2124621260
data === SUSPENSE_FALLBACK_START_DATA ||
2124721261
data === SUSPENSE_PENDING_START_DATA ||
21262+
data === SUSPENSE_QUEUED_START_DATA ||
2124821263
data === ACTIVITY_START_DATA
2124921264
) {
2125021265
if (0 === depth) return targetInstance;
@@ -26048,13 +26063,14 @@ __DEV__ &&
2604826063
SUSPENSE_START_DATA = "$",
2604926064
SUSPENSE_END_DATA = "/$",
2605026065
SUSPENSE_PENDING_START_DATA = "$?",
26066+
SUSPENSE_QUEUED_START_DATA = "$~",
2605126067
SUSPENSE_FALLBACK_START_DATA = "$!",
2605226068
PREAMBLE_CONTRIBUTION_HTML = "html",
2605326069
PREAMBLE_CONTRIBUTION_BODY = "body",
2605426070
PREAMBLE_CONTRIBUTION_HEAD = "head",
2605526071
FORM_STATE_IS_MATCHING = "F!",
2605626072
FORM_STATE_IS_NOT_MATCHING = "F",
26057-
DOCUMENT_READY_STATE_COMPLETE = "complete",
26073+
DOCUMENT_READY_STATE_LOADING = "loading",
2605826074
STYLE = "style",
2605926075
HostContextNamespaceNone = 0,
2606026076
HostContextNamespaceSvg = 1,
@@ -26634,11 +26650,11 @@ __DEV__ &&
2663426650
};
2663526651
(function () {
2663626652
var isomorphicReactPackageVersion = React.version;
26637-
if ("19.2.0-native-fb-408d055a-20250430" !== isomorphicReactPackageVersion)
26653+
if ("19.2.0-native-fb-0ed6ceb9-20250501" !== isomorphicReactPackageVersion)
2663826654
throw Error(
2663926655
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2664026656
(isomorphicReactPackageVersion +
26641-
"\n - react-dom: 19.2.0-native-fb-408d055a-20250430\nLearn more: https://react.dev/warnings/version-mismatch")
26657+
"\n - react-dom: 19.2.0-native-fb-0ed6ceb9-20250501\nLearn more: https://react.dev/warnings/version-mismatch")
2664226658
);
2664326659
})();
2664426660
("function" === typeof Map &&
@@ -26675,10 +26691,10 @@ __DEV__ &&
2667526691
!(function () {
2667626692
var internals = {
2667726693
bundleType: 1,
26678-
version: "19.2.0-native-fb-408d055a-20250430",
26694+
version: "19.2.0-native-fb-0ed6ceb9-20250501",
2667926695
rendererPackageName: "react-dom",
2668026696
currentDispatcherRef: ReactSharedInternals,
26681-
reconcilerVersion: "19.2.0-native-fb-408d055a-20250430"
26697+
reconcilerVersion: "19.2.0-native-fb-0ed6ceb9-20250501"
2668226698
};
2668326699
internals.overrideHookState = overrideHookState;
2668426700
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26822,5 +26838,5 @@ __DEV__ &&
2682226838
listenToAllSupportedEvents(container);
2682326839
return new ReactDOMHydrationRoot(initialChildren);
2682426840
};
26825-
exports.version = "19.2.0-native-fb-408d055a-20250430";
26841+
exports.version = "19.2.0-native-fb-0ed6ceb9-20250501";
2682626842
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<4532c8913f82388d548a1468c2eb7b61>>
10+
* @generated SignedSource<<4d808718671119eeb92d5fca2e8ffff2>>
1111
*/
1212

1313
/*
@@ -4465,7 +4465,7 @@ function findFirstSuspended(row) {
44654465
null !== state &&
44664466
((state = state.dehydrated),
44674467
null === state ||
4468-
"$?" === state.data ||
4468+
isSuspenseInstancePending(state) ||
44694469
isSuspenseInstanceFallback(state))
44704470
)
44714471
return node;
@@ -7185,14 +7185,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
71857185
scheduleUpdateOnFiber(JSCompiler_temp, current, nextProps),
71867186
SelectiveHydrationException)
71877187
);
7188-
"$?" === nextPrimaryChildren.data || renderDidSuspendDelayIfPossible();
7188+
isSuspenseInstancePending(nextPrimaryChildren) ||
7189+
renderDidSuspendDelayIfPossible();
71897190
workInProgress = retrySuspenseComponentWithoutHydrating(
71907191
current,
71917192
workInProgress,
71927193
renderLanes
71937194
);
71947195
} else
7195-
"$?" === nextPrimaryChildren.data
7196+
isSuspenseInstancePending(nextPrimaryChildren)
71967197
? ((workInProgress.flags |= 192),
71977198
(workInProgress.child = current.child),
71987199
(workInProgress = null))
@@ -14696,7 +14697,13 @@ function clearHydrationBoundary(parentInstance, hydrationInstance) {
1469614697
return;
1469714698
}
1469814699
depth--;
14699-
} else if ("$" === node || "$?" === node || "$!" === node || "&" === node)
14700+
} else if (
14701+
"$" === node ||
14702+
"$?" === node ||
14703+
"$~" === node ||
14704+
"$!" === node ||
14705+
"&" === node
14706+
)
1470014707
depth++;
1470114708
else if ("html" === node)
1470214709
releaseSingletonInstance(parentInstance.ownerDocument.documentElement);
@@ -14741,7 +14748,8 @@ function hideOrUnhideDehydratedBoundary(suspenseInstance, isHidden) {
1474114748
if (0 === suspenseInstance) break;
1474214749
else suspenseInstance--;
1474314750
else
14744-
("$" !== node && "$?" !== node && "$!" !== node) || suspenseInstance++;
14751+
("$" !== node && "$?" !== node && "$~" !== node && "$!" !== node) ||
14752+
suspenseInstance++;
1474514753
node = nextNode;
1474614754
} while (node);
1474714755
}
@@ -15075,15 +15083,19 @@ function canHydrateHydrationBoundary(instance, inRootOrSingleton) {
1507515083
}
1507615084
return instance;
1507715085
}
15086+
function isSuspenseInstancePending(instance) {
15087+
return "$?" === instance.data || "$~" === instance.data;
15088+
}
1507815089
function isSuspenseInstanceFallback(instance) {
1507915090
return (
1508015091
"$!" === instance.data ||
15081-
("$?" === instance.data && "complete" === instance.ownerDocument.readyState)
15092+
("$?" === instance.data && "loading" !== instance.ownerDocument.readyState)
1508215093
);
1508315094
}
1508415095
function registerSuspenseInstanceRetry(instance, callback) {
1508515096
var ownerDocument = instance.ownerDocument;
15086-
if ("$?" !== instance.data || "complete" === ownerDocument.readyState)
15097+
if ("$~" === instance.data) instance._reactRetry = callback;
15098+
else if ("$?" !== instance.data || "loading" !== ownerDocument.readyState)
1508715099
callback();
1508815100
else {
1508915101
var listener = function () {
@@ -15104,6 +15116,7 @@ function getNextHydratable(node) {
1510415116
"$" === nodeType ||
1510515117
"$!" === nodeType ||
1510615118
"$?" === nodeType ||
15119+
"$~" === nodeType ||
1510715120
"&" === nodeType ||
1510815121
"F!" === nodeType ||
1510915122
"F" === nodeType
@@ -15125,7 +15138,11 @@ function getNextHydratableInstanceAfterHydrationBoundary(hydrationInstance) {
1512515138
return getNextHydratable(hydrationInstance.nextSibling);
1512615139
depth--;
1512715140
} else
15128-
("$" !== data && "$!" !== data && "$?" !== data && "&" !== data) ||
15141+
("$" !== data &&
15142+
"$!" !== data &&
15143+
"$?" !== data &&
15144+
"$~" !== data &&
15145+
"&" !== data) ||
1512915146
depth++;
1513015147
}
1513115148
hydrationInstance = hydrationInstance.nextSibling;
@@ -15137,7 +15154,13 @@ function getParentHydrationBoundary(targetInstance) {
1513715154
for (var depth = 0; targetInstance; ) {
1513815155
if (8 === targetInstance.nodeType) {
1513915156
var data = targetInstance.data;
15140-
if ("$" === data || "$!" === data || "$?" === data || "&" === data) {
15157+
if (
15158+
"$" === data ||
15159+
"$!" === data ||
15160+
"$?" === data ||
15161+
"$~" === data ||
15162+
"&" === data
15163+
) {
1514115164
if (0 === depth) return targetInstance;
1514215165
depth--;
1514315166
} else ("/$" !== data && "/&" !== data) || depth++;
@@ -16725,14 +16748,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1672516748
};
1672616749
var isomorphicReactPackageVersion$jscomp$inline_1904 = React.version;
1672716750
if (
16728-
"19.2.0-native-fb-408d055a-20250430" !==
16751+
"19.2.0-native-fb-0ed6ceb9-20250501" !==
1672916752
isomorphicReactPackageVersion$jscomp$inline_1904
1673016753
)
1673116754
throw Error(
1673216755
formatProdErrorMessage(
1673316756
527,
1673416757
isomorphicReactPackageVersion$jscomp$inline_1904,
16735-
"19.2.0-native-fb-408d055a-20250430"
16758+
"19.2.0-native-fb-0ed6ceb9-20250501"
1673616759
)
1673716760
);
1673816761
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16754,10 +16777,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1675416777
};
1675516778
var internals$jscomp$inline_2388 = {
1675616779
bundleType: 0,
16757-
version: "19.2.0-native-fb-408d055a-20250430",
16780+
version: "19.2.0-native-fb-0ed6ceb9-20250501",
1675816781
rendererPackageName: "react-dom",
1675916782
currentDispatcherRef: ReactSharedInternals,
16760-
reconcilerVersion: "19.2.0-native-fb-408d055a-20250430"
16783+
reconcilerVersion: "19.2.0-native-fb-0ed6ceb9-20250501"
1676116784
};
1676216785
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1676316786
var hook$jscomp$inline_2389 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16861,4 +16884,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1686116884
listenToAllSupportedEvents(container);
1686216885
return new ReactDOMHydrationRoot(initialChildren);
1686316886
};
16864-
exports.version = "19.2.0-native-fb-408d055a-20250430";
16887+
exports.version = "19.2.0-native-fb-0ed6ceb9-20250501";

0 commit comments

Comments
 (0)