Skip to content

Commit

Permalink
[Fiber] Schedule client renders using non-hydration lane (#31776)
Browse files Browse the repository at this point in the history
Related to #31752.

When hydrating, we have two different ways of handling a Suspense
boundary that the server has already given up on and decided to client
render. If we have already hydrated the parent and then later this
happens, then we'll use the retry lane like any ping. If we discover
that it was already in client-render mode when we discover the Suspense
boundary for the first time, then schedule a default lane to let us
first finish the current render and then upgrade the priority to sync to
try to client render this boundary as soon as possible since we're
holding back content.

We used to use the `DefaultHydrationLane` for this but this is not
really a Hydration. It's actually a client render. If we get any other
updates flowing in from above at the same time we might as well do them
in the same pass instead of two passes. So this should be considered
more like any update.

This also means that visually the client render pass now gets painted as
a render instead of a hydration.

This show the flow of a shell being hydrated at the default priority,
then a Suspense boundary being discovered and hydrated at Idle and then
an inner boundary being discovered as client rendered which gets
upgraded to default.

<img width="1363" alt="Screenshot 2024-12-14 at 12 13 57 AM"
src="https://github.com/user-attachments/assets/a141133e-4856-4f38-a11f-f26bd00b6245"
/>

DiffTrain build for [d1dd7fe](d1dd7fe)
  • Loading branch information
sebmarkbage committed Dec 14, 2024
1 parent eccdc2d commit 1122f7a
Show file tree
Hide file tree
Showing 23 changed files with 92 additions and 92 deletions.
2 changes: 1 addition & 1 deletion compiled-rn/VERSION_NATIVE_FB
Original file line number Diff line number Diff line change
@@ -1 +1 @@
19.1.0-native-fb-2e25ee37-20241214
19.1.0-native-fb-d1dd7fea-20241214
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<b207ed493a75b8f08e0170a0d710a29a>>
* @generated SignedSource<<194e6ed4d109fe9b3fec68862d1c08b4>>
*/

"use strict";
Expand Down Expand Up @@ -420,5 +420,5 @@ __DEV__ &&
exports.useFormStatus = function () {
return resolveDispatcher().useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
})();
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<6a9775b471e26a56127dfbf51de7d359>>
* @generated SignedSource<<577f410cc31506496feeec38028e6d72>>
*/

"use strict";
Expand Down Expand Up @@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
exports.useFormStatus = function () {
return ReactSharedInternals.H.useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<6a9775b471e26a56127dfbf51de7d359>>
* @generated SignedSource<<577f410cc31506496feeec38028e6d72>>
*/

"use strict";
Expand Down Expand Up @@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
exports.useFormStatus = function () {
return ReactSharedInternals.H.useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<540ca95f3e4f00baced33ea137ff3e38>>
* @generated SignedSource<<02ce25e11ab3883f6b046d9da002336b>>
*/

/*
Expand Down Expand Up @@ -9373,7 +9373,7 @@ __DEV__ &&
)
return (
isSuspenseInstanceFallback(JSCompiler_object_inline_message_2359)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -25892,11 +25892,11 @@ __DEV__ &&
};
(function () {
var isomorphicReactPackageVersion = React.version;
if ("19.1.0-native-fb-2e25ee37-20241214" !== isomorphicReactPackageVersion)
if ("19.1.0-native-fb-d1dd7fea-20241214" !== isomorphicReactPackageVersion)
throw Error(
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
(isomorphicReactPackageVersion +
"\n - react-dom: 19.1.0-native-fb-2e25ee37-20241214\nLearn more: https://react.dev/warnings/version-mismatch")
"\n - react-dom: 19.1.0-native-fb-d1dd7fea-20241214\nLearn more: https://react.dev/warnings/version-mismatch")
);
})();
("function" === typeof Map &&
Expand Down Expand Up @@ -25933,10 +25933,10 @@ __DEV__ &&
!(function () {
var internals = {
bundleType: 1,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214"
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -26082,5 +26082,5 @@ __DEV__ &&
listenToAllSupportedEvents(container);
return new ReactDOMHydrationRoot(initialChildren);
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
})();
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<2e0fefb103c6cb42fd560231707143b5>>
* @generated SignedSource<<a040cd910a06d913ead55515fa3f5786>>
*/

/*
Expand Down Expand Up @@ -6502,7 +6502,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
)
return (
isSuspenseInstanceFallback(nextInstance)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -15868,14 +15868,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
};
var isomorphicReactPackageVersion$jscomp$inline_1722 = React.version;
if (
"19.1.0-native-fb-2e25ee37-20241214" !==
"19.1.0-native-fb-d1dd7fea-20241214" !==
isomorphicReactPackageVersion$jscomp$inline_1722
)
throw Error(
formatProdErrorMessage(
527,
isomorphicReactPackageVersion$jscomp$inline_1722,
"19.1.0-native-fb-2e25ee37-20241214"
"19.1.0-native-fb-d1dd7fea-20241214"
)
);
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
Expand All @@ -15897,10 +15897,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
};
var internals$jscomp$inline_2177 = {
bundleType: 0,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214"
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2178 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down Expand Up @@ -16006,4 +16006,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
listenToAllSupportedEvents(container);
return new ReactDOMHydrationRoot(initialChildren);
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<abe79f9d3e332bd1b04548e9488f44df>>
* @generated SignedSource<<8ea56ac344a45b3b8445f71e0a05e03d>>
*/

/*
Expand Down Expand Up @@ -6673,7 +6673,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
)
return (
isSuspenseInstanceFallback(nextInstance)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -16521,14 +16521,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
};
var isomorphicReactPackageVersion$jscomp$inline_1812 = React.version;
if (
"19.1.0-native-fb-2e25ee37-20241214" !==
"19.1.0-native-fb-d1dd7fea-20241214" !==
isomorphicReactPackageVersion$jscomp$inline_1812
)
throw Error(
formatProdErrorMessage(
527,
isomorphicReactPackageVersion$jscomp$inline_1812,
"19.1.0-native-fb-2e25ee37-20241214"
"19.1.0-native-fb-d1dd7fea-20241214"
)
);
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
Expand All @@ -16550,10 +16550,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
};
var internals$jscomp$inline_1819 = {
bundleType: 0,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214",
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214",
getLaneLabelMap: function () {
for (
var map = new Map(), lane = 1, index$292 = 0;
Expand Down Expand Up @@ -16674,4 +16674,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
listenToAllSupportedEvents(container);
return new ReactDOMHydrationRoot(initialChildren);
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<f1d5137866444edf21870d75f8403c28>>
* @generated SignedSource<<b72c5642d2d7dba9434c360b1b1795cc>>
*/

/*
Expand Down Expand Up @@ -9381,7 +9381,7 @@ __DEV__ &&
)
return (
isSuspenseInstanceFallback(JSCompiler_object_inline_message_2364)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -25953,11 +25953,11 @@ __DEV__ &&
};
(function () {
var isomorphicReactPackageVersion = React.version;
if ("19.1.0-native-fb-2e25ee37-20241214" !== isomorphicReactPackageVersion)
if ("19.1.0-native-fb-d1dd7fea-20241214" !== isomorphicReactPackageVersion)
throw Error(
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
(isomorphicReactPackageVersion +
"\n - react-dom: 19.1.0-native-fb-2e25ee37-20241214\nLearn more: https://react.dev/warnings/version-mismatch")
"\n - react-dom: 19.1.0-native-fb-d1dd7fea-20241214\nLearn more: https://react.dev/warnings/version-mismatch")
);
})();
("function" === typeof Map &&
Expand Down Expand Up @@ -25994,10 +25994,10 @@ __DEV__ &&
!(function () {
var internals = {
bundleType: 1,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214"
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -26459,7 +26459,7 @@ __DEV__ &&
exports.useFormStatus = function () {
return resolveDispatcher().useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<5a969ad2f9aa25908f31b58546fc4395>>
* @generated SignedSource<<2403fb154423c8342af4e380646385fb>>
*/

/*
Expand Down Expand Up @@ -6502,7 +6502,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
)
return (
isSuspenseInstanceFallback(nextInstance)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -15879,14 +15879,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
};
var isomorphicReactPackageVersion$jscomp$inline_1723 = React.version;
if (
"19.1.0-native-fb-2e25ee37-20241214" !==
"19.1.0-native-fb-d1dd7fea-20241214" !==
isomorphicReactPackageVersion$jscomp$inline_1723
)
throw Error(
formatProdErrorMessage(
527,
isomorphicReactPackageVersion$jscomp$inline_1723,
"19.1.0-native-fb-2e25ee37-20241214"
"19.1.0-native-fb-d1dd7fea-20241214"
)
);
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
Expand All @@ -15908,10 +15908,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
};
var internals$jscomp$inline_2180 = {
bundleType: 0,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214"
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2181 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down Expand Up @@ -16171,4 +16171,4 @@ exports.useFormState = function (action, initialState, permalink) {
exports.useFormStatus = function () {
return ReactSharedInternals.H.useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<7767b30b387d1cb1b4803868111cc705>>
* @generated SignedSource<<1b2d4c10edf69152a907ed320ba717b0>>
*/

/*
Expand Down Expand Up @@ -6677,7 +6677,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
)
return (
isSuspenseInstanceFallback(nextInstance)
? (workInProgress.lanes = 16)
? (workInProgress.lanes = 32)
: (workInProgress.lanes = 536870912),
null
);
Expand Down Expand Up @@ -16536,14 +16536,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
};
var isomorphicReactPackageVersion$jscomp$inline_1813 = React.version;
if (
"19.1.0-native-fb-2e25ee37-20241214" !==
"19.1.0-native-fb-d1dd7fea-20241214" !==
isomorphicReactPackageVersion$jscomp$inline_1813
)
throw Error(
formatProdErrorMessage(
527,
isomorphicReactPackageVersion$jscomp$inline_1813,
"19.1.0-native-fb-2e25ee37-20241214"
"19.1.0-native-fb-d1dd7fea-20241214"
)
);
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
Expand All @@ -16565,10 +16565,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
};
var internals$jscomp$inline_1820 = {
bundleType: 0,
version: "19.1.0-native-fb-2e25ee37-20241214",
version: "19.1.0-native-fb-d1dd7fea-20241214",
rendererPackageName: "react-dom",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-native-fb-2e25ee37-20241214",
reconcilerVersion: "19.1.0-native-fb-d1dd7fea-20241214",
getLaneLabelMap: function () {
for (
var map = new Map(), lane = 1, index$292 = 0;
Expand Down Expand Up @@ -16843,7 +16843,7 @@ exports.useFormState = function (action, initialState, permalink) {
exports.useFormStatus = function () {
return ReactSharedInternals.H.useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-2e25ee37-20241214";
exports.version = "19.1.0-native-fb-d1dd7fea-20241214";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Loading

0 comments on commit 1122f7a

Please sign in to comment.