Skip to content

Commit 79219e4

Browse files
sebmarkbagesebmarkbage
committed
Rename <Suspense unstable_expectedLoadTime> to <Suspense defer> and implement in SSR (#35022)
We've long had the CPU suspense feature behind a flag under the terrible API `unstable_expectedLoadTime={arbitraryNumber}`. We've known for a long time we want it to just be `defer={true}` (or just `<Suspense defer>` in the short hand syntax). So this adds the new name and warns for the old name. For only the new name, I also implemented SSR semantics in Fizz. It has two effects here. 1) It renders the fallback before the content (similar to prerender) allowing siblings to complete quicker. 2) It always outlines the result. When streaming this should really happen naturally but if you defer a prerendered content it also implies that it's expensive and should be outlined. It gives you a opt-in to outlining similar to suspensey images and css but let you control it manually. DiffTrain build for [0ba2f01](0ba2f01)
1 parent 7d12a28 commit 79219e4

File tree

21 files changed

+150
-88
lines changed

21 files changed

+150
-88
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.3.0-native-fb-986323f8-20251104
1+
19.3.0-native-fb-0ba2f01f-20251105

‎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<<76e1e978b3a5ec3938af74344bfa9bf2>>
10+
* @generated SignedSource<<4cc14a44e022d9fd7427b15f3570e178>>
1111
*/
1212

1313
"use strict";
@@ -414,5 +414,5 @@ __DEV__ &&
414414
exports.useFormStatus = function () {
415415
return resolveDispatcher().useHostTransitionStatus();
416416
};
417-
exports.version = "19.3.0-native-fb-986323f8-20251104";
417+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";
418418
})();

‎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<<759cc92933115138545fc403778fd5e9>>
10+
* @generated SignedSource<<a2ca43e1c189c13ec619643a8d22c3d2>>
1111
*/
1212

1313
"use strict";
@@ -209,4 +209,4 @@ exports.useFormState = function (action, initialState, permalink) {
209209
exports.useFormStatus = function () {
210210
return ReactSharedInternals.H.useHostTransitionStatus();
211211
};
212-
exports.version = "19.3.0-native-fb-986323f8-20251104";
212+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";

‎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<<759cc92933115138545fc403778fd5e9>>
10+
* @generated SignedSource<<a2ca43e1c189c13ec619643a8d22c3d2>>
1111
*/
1212

1313
"use strict";
@@ -209,4 +209,4 @@ exports.useFormState = function (action, initialState, permalink) {
209209
exports.useFormStatus = function () {
210210
return ReactSharedInternals.H.useHostTransitionStatus();
211211
};
212-
exports.version = "19.3.0-native-fb-986323f8-20251104";
212+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<d6528ce4705468867f309f19e7382ceb>>
10+
* @generated SignedSource<<8d7921dc8bceb18407f50720ec9d4090>>
1111
*/
1212

1313
/*
@@ -11318,9 +11318,17 @@ __DEV__ &&
1131811318
);
1131911319
if (
1132011320
"number" ===
11321-
typeof JSCompiler_object_inline_stack_3006.unstable_expectedLoadTime
11321+
typeof JSCompiler_object_inline_stack_3006.unstable_expectedLoadTime ||
11322+
!0 === JSCompiler_object_inline_stack_3006.defer
1132211323
)
1132311324
return (
11325+
"number" !==
11326+
typeof JSCompiler_object_inline_stack_3006.unstable_expectedLoadTime ||
11327+
didWarnAboutExpectedLoadTime ||
11328+
((didWarnAboutExpectedLoadTime = !0),
11329+
console.error(
11330+
"<Suspense unstable_expectedLoadTime={...}> is deprecated. Use <Suspense defer={true}> instead."
11331+
)),
1132411332
reuseSuspenseHandlerOnStack(workInProgress),
1132511333
mountSuspenseFallbackChildren(
1132611334
workInProgress,
@@ -28855,7 +28863,8 @@ __DEV__ &&
2885528863
SelectiveHydrationException = Error(
2885628864
"This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue."
2885728865
),
28858-
didReceiveUpdate = !1;
28866+
didReceiveUpdate = !1,
28867+
didWarnAboutExpectedLoadTime = !1;
2885928868
var didWarnAboutBadClass = {};
2886028869
var didWarnAboutContextTypeOnFunctionComponent = {};
2886128870
var didWarnAboutContextTypes = {};
@@ -29863,11 +29872,11 @@ __DEV__ &&
2986329872
};
2986429873
(function () {
2986529874
var isomorphicReactPackageVersion = React.version;
29866-
if ("19.3.0-native-fb-986323f8-20251104" !== isomorphicReactPackageVersion)
29875+
if ("19.3.0-native-fb-0ba2f01f-20251105" !== isomorphicReactPackageVersion)
2986729876
throw Error(
2986829877
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2986929878
(isomorphicReactPackageVersion +
29870-
"\n - react-dom: 19.3.0-native-fb-986323f8-20251104\nLearn more: https://react.dev/warnings/version-mismatch")
29879+
"\n - react-dom: 19.3.0-native-fb-0ba2f01f-20251105\nLearn more: https://react.dev/warnings/version-mismatch")
2987129880
);
2987229881
})();
2987329882
("function" === typeof Map &&
@@ -29904,10 +29913,10 @@ __DEV__ &&
2990429913
!(function () {
2990529914
var internals = {
2990629915
bundleType: 1,
29907-
version: "19.3.0-native-fb-986323f8-20251104",
29916+
version: "19.3.0-native-fb-0ba2f01f-20251105",
2990829917
rendererPackageName: "react-dom",
2990929918
currentDispatcherRef: ReactSharedInternals,
29910-
reconcilerVersion: "19.3.0-native-fb-986323f8-20251104"
29919+
reconcilerVersion: "19.3.0-native-fb-0ba2f01f-20251105"
2991129920
};
2991229921
internals.overrideHookState = overrideHookState;
2991329922
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -30057,5 +30066,5 @@ __DEV__ &&
3005730066
listenToAllSupportedEvents(container);
3005830067
return new ReactDOMHydrationRoot(initialChildren);
3005930068
};
30060-
exports.version = "19.3.0-native-fb-986323f8-20251104";
30069+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";
3006130070
})();

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

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

1313
/*
@@ -7230,7 +7230,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
72307230
(workInProgress.memoizedState = SUSPENDED_MARKER),
72317231
bailoutOffscreenComponent(null, nextProps)
72327232
);
7233-
if ("number" === typeof nextProps.unstable_expectedLoadTime)
7233+
if (
7234+
"number" === typeof nextProps.unstable_expectedLoadTime ||
7235+
!0 === nextProps.defer
7236+
)
72347237
return (
72357238
reuseSuspenseHandlerOnStack(),
72367239
mountSuspenseFallbackChildren(
@@ -17485,14 +17488,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1748517488
};
1748617489
var isomorphicReactPackageVersion$jscomp$inline_2036 = React.version;
1748717490
if (
17488-
"19.3.0-native-fb-986323f8-20251104" !==
17491+
"19.3.0-native-fb-0ba2f01f-20251105" !==
1748917492
isomorphicReactPackageVersion$jscomp$inline_2036
1749017493
)
1749117494
throw Error(
1749217495
formatProdErrorMessage(
1749317496
527,
1749417497
isomorphicReactPackageVersion$jscomp$inline_2036,
17495-
"19.3.0-native-fb-986323f8-20251104"
17498+
"19.3.0-native-fb-0ba2f01f-20251105"
1749617499
)
1749717500
);
1749817501
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17514,10 +17517,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1751417517
};
1751517518
var internals$jscomp$inline_2641 = {
1751617519
bundleType: 0,
17517-
version: "19.3.0-native-fb-986323f8-20251104",
17520+
version: "19.3.0-native-fb-0ba2f01f-20251105",
1751817521
rendererPackageName: "react-dom",
1751917522
currentDispatcherRef: ReactSharedInternals,
17520-
reconcilerVersion: "19.3.0-native-fb-986323f8-20251104"
17523+
reconcilerVersion: "19.3.0-native-fb-0ba2f01f-20251105"
1752117524
};
1752217525
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1752317526
var hook$jscomp$inline_2642 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17624,4 +17627,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1762417627
listenToAllSupportedEvents(container);
1762517628
return new ReactDOMHydrationRoot(initialChildren);
1762617629
};
17627-
exports.version = "19.3.0-native-fb-986323f8-20251104";
17630+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";

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

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

1313
/*
@@ -7719,7 +7719,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
77197719
(workInProgress.memoizedState = SUSPENDED_MARKER),
77207720
bailoutOffscreenComponent(null, nextProps)
77217721
);
7722-
if ("number" === typeof nextProps.unstable_expectedLoadTime)
7722+
if (
7723+
"number" === typeof nextProps.unstable_expectedLoadTime ||
7724+
!0 === nextProps.defer
7725+
)
77237726
return (
77247727
reuseSuspenseHandlerOnStack(),
77257728
mountSuspenseFallbackChildren(
@@ -19589,14 +19592,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1958919592
};
1959019593
var isomorphicReactPackageVersion$jscomp$inline_2351 = React.version;
1959119594
if (
19592-
"19.3.0-native-fb-986323f8-20251104" !==
19595+
"19.3.0-native-fb-0ba2f01f-20251105" !==
1959319596
isomorphicReactPackageVersion$jscomp$inline_2351
1959419597
)
1959519598
throw Error(
1959619599
formatProdErrorMessage(
1959719600
527,
1959819601
isomorphicReactPackageVersion$jscomp$inline_2351,
19599-
"19.3.0-native-fb-986323f8-20251104"
19602+
"19.3.0-native-fb-0ba2f01f-20251105"
1960019603
)
1960119604
);
1960219605
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -19618,10 +19621,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1961819621
};
1961919622
var internals$jscomp$inline_2358 = {
1962019623
bundleType: 0,
19621-
version: "19.3.0-native-fb-986323f8-20251104",
19624+
version: "19.3.0-native-fb-0ba2f01f-20251105",
1962219625
rendererPackageName: "react-dom",
1962319626
currentDispatcherRef: ReactSharedInternals,
19624-
reconcilerVersion: "19.3.0-native-fb-986323f8-20251104",
19627+
reconcilerVersion: "19.3.0-native-fb-0ba2f01f-20251105",
1962519628
getLaneLabelMap: function () {
1962619629
for (
1962719630
var map = new Map(), lane = 1, index$326 = 0;
@@ -19744,4 +19747,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1974419747
listenToAllSupportedEvents(container);
1974519748
return new ReactDOMHydrationRoot(initialChildren);
1974619749
};
19747-
exports.version = "19.3.0-native-fb-986323f8-20251104";
19750+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<6179cfb14214390645d068a88813410a>>
10+
* @generated SignedSource<<10885613e26949ff92e85348e28a0c62>>
1111
*/
1212

1313
/*
@@ -11326,9 +11326,17 @@ __DEV__ &&
1132611326
);
1132711327
if (
1132811328
"number" ===
11329-
typeof JSCompiler_object_inline_stack_3011.unstable_expectedLoadTime
11329+
typeof JSCompiler_object_inline_stack_3011.unstable_expectedLoadTime ||
11330+
!0 === JSCompiler_object_inline_stack_3011.defer
1133011331
)
1133111332
return (
11333+
"number" !==
11334+
typeof JSCompiler_object_inline_stack_3011.unstable_expectedLoadTime ||
11335+
didWarnAboutExpectedLoadTime ||
11336+
((didWarnAboutExpectedLoadTime = !0),
11337+
console.error(
11338+
"<Suspense unstable_expectedLoadTime={...}> is deprecated. Use <Suspense defer={true}> instead."
11339+
)),
1133211340
reuseSuspenseHandlerOnStack(workInProgress),
1133311341
mountSuspenseFallbackChildren(
1133411342
workInProgress,
@@ -28911,7 +28919,8 @@ __DEV__ &&
2891128919
SelectiveHydrationException = Error(
2891228920
"This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue."
2891328921
),
28914-
didReceiveUpdate = !1;
28922+
didReceiveUpdate = !1,
28923+
didWarnAboutExpectedLoadTime = !1;
2891528924
var didWarnAboutBadClass = {};
2891628925
var didWarnAboutContextTypeOnFunctionComponent = {};
2891728926
var didWarnAboutContextTypes = {};
@@ -29919,11 +29928,11 @@ __DEV__ &&
2991929928
};
2992029929
(function () {
2992129930
var isomorphicReactPackageVersion = React.version;
29922-
if ("19.3.0-native-fb-986323f8-20251104" !== isomorphicReactPackageVersion)
29931+
if ("19.3.0-native-fb-0ba2f01f-20251105" !== isomorphicReactPackageVersion)
2992329932
throw Error(
2992429933
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2992529934
(isomorphicReactPackageVersion +
29926-
"\n - react-dom: 19.3.0-native-fb-986323f8-20251104\nLearn more: https://react.dev/warnings/version-mismatch")
29935+
"\n - react-dom: 19.3.0-native-fb-0ba2f01f-20251105\nLearn more: https://react.dev/warnings/version-mismatch")
2992729936
);
2992829937
})();
2992929938
("function" === typeof Map &&
@@ -29960,10 +29969,10 @@ __DEV__ &&
2996029969
!(function () {
2996129970
var internals = {
2996229971
bundleType: 1,
29963-
version: "19.3.0-native-fb-986323f8-20251104",
29972+
version: "19.3.0-native-fb-0ba2f01f-20251105",
2996429973
rendererPackageName: "react-dom",
2996529974
currentDispatcherRef: ReactSharedInternals,
29966-
reconcilerVersion: "19.3.0-native-fb-986323f8-20251104"
29975+
reconcilerVersion: "19.3.0-native-fb-0ba2f01f-20251105"
2996729976
};
2996829977
internals.overrideHookState = overrideHookState;
2996929978
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -30443,7 +30452,7 @@ __DEV__ &&
3044330452
exports.useFormStatus = function () {
3044430453
return resolveDispatcher().useHostTransitionStatus();
3044530454
};
30446-
exports.version = "19.3.0-native-fb-986323f8-20251104";
30455+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";
3044730456
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
3044830457
"function" ===
3044930458
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

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

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

1313
/*
@@ -7230,7 +7230,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
72307230
(workInProgress.memoizedState = SUSPENDED_MARKER),
72317231
bailoutOffscreenComponent(null, nextProps)
72327232
);
7233-
if ("number" === typeof nextProps.unstable_expectedLoadTime)
7233+
if (
7234+
"number" === typeof nextProps.unstable_expectedLoadTime ||
7235+
!0 === nextProps.defer
7236+
)
72347237
return (
72357238
reuseSuspenseHandlerOnStack(),
72367239
mountSuspenseFallbackChildren(
@@ -17496,14 +17499,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1749617499
};
1749717500
var isomorphicReactPackageVersion$jscomp$inline_2037 = React.version;
1749817501
if (
17499-
"19.3.0-native-fb-986323f8-20251104" !==
17502+
"19.3.0-native-fb-0ba2f01f-20251105" !==
1750017503
isomorphicReactPackageVersion$jscomp$inline_2037
1750117504
)
1750217505
throw Error(
1750317506
formatProdErrorMessage(
1750417507
527,
1750517508
isomorphicReactPackageVersion$jscomp$inline_2037,
17506-
"19.3.0-native-fb-986323f8-20251104"
17509+
"19.3.0-native-fb-0ba2f01f-20251105"
1750717510
)
1750817511
);
1750917512
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17525,10 +17528,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1752517528
};
1752617529
var internals$jscomp$inline_2644 = {
1752717530
bundleType: 0,
17528-
version: "19.3.0-native-fb-986323f8-20251104",
17531+
version: "19.3.0-native-fb-0ba2f01f-20251105",
1752917532
rendererPackageName: "react-dom",
1753017533
currentDispatcherRef: ReactSharedInternals,
17531-
reconcilerVersion: "19.3.0-native-fb-986323f8-20251104"
17534+
reconcilerVersion: "19.3.0-native-fb-0ba2f01f-20251105"
1753217535
};
1753317536
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1753417537
var hook$jscomp$inline_2645 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17795,4 +17798,4 @@ exports.useFormState = function (action, initialState, permalink) {
1779517798
exports.useFormStatus = function () {
1779617799
return ReactSharedInternals.H.useHostTransitionStatus();
1779717800
};
17798-
exports.version = "19.3.0-native-fb-986323f8-20251104";
17801+
exports.version = "19.3.0-native-fb-0ba2f01f-20251105";

0 commit comments

Comments
 (0)