Skip to content

Commit

Permalink
[Fiber] support hydration when rendering Suspense anywhere (#32224)
Browse files Browse the repository at this point in the history 
follow up to #32163

This continues the work of making Suspense workable anywhere in a
react-dom tree. See the prior PRs for how we handle server rendering and
client rendering. In this change we update the hydration implementation
to be able to locate expected nodes. In particular this means hydration
understands now that the default hydration context is the document body
when the container is above the body.

One case that is unique to hydration is clearing Suspense boundaries.
When hydration fails or when the server instructs the client to recover
an errored boundary it's possible that the html, head, and body tags in
the initial document were written from a fallback or a different primary
content on the server and need to be replaced by the client render.
However these tags (and in the case of head, their content) won't be
inside the comment nodes that identify the bounds of the Suspense
boundary. And when client rendering you may not even render the same
singletons that were server rendered. So when server rendering a
boudnary which contributes to the preamble (the html, head, and body tag
openings plus the head contents) we emit a special marker comment just
before closing the boundary out. This marker encodes which parts of the
preamble this boundary owned. If we need to clear the suspense boundary
on the client we read this marker and use it to reset the appropriate
singleton state.

DiffTrain build for [8bda715](8bda715)
  • Loading branch information
@gnoff
gnoff committed Feb 4, 2025
1 parent 582a010 commit e401203
Show file tree
Hide file tree
Showing 36 changed files with 3,168 additions and 2,273 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
19ca800caa01eec2f5e65e547c67b11592bec8b0
8bda71558c8b6f9f19af33271f1bfd0251a1c071
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION_TRANSFORMS
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
19ca800caa01eec2f5e65e547c67b11592bec8b0
8bda71558c8b6f9f19af33271f1bfd0251a1c071
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1958,7 +1958,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.1.0-www-classic-19ca800c-20250131";
exports.version = "19.1.0-www-classic-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1958,7 +1958,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.1.0-www-modern-19ca800c-20250131";
exports.version = "19.1.0-www-modern-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-classic-19ca800c-20250131";
exports.version = "19.1.0-www-classic-8bda7155-20250204";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-modern-19ca800c-20250131";
exports.version = "19.1.0-www-modern-8bda7155-20250204";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-classic-19ca800c-20250131";
exports.version = "19.1.0-www-classic-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-modern-19ca800c-20250131";
exports.version = "19.1.0-www-modern-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-dev.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16932,10 +16932,10 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.1.0-www-classic-19ca800c-20250131",
version: "19.1.0-www-classic-8bda7155-20250204",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-www-classic-19ca800c-20250131"
reconcilerVersion: "19.1.0-www-classic-8bda7155-20250204"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -16969,7 +16969,7 @@ __DEV__ &&
exports.Shape = Shape;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.1.0-www-classic-19ca800c-20250131";
exports.version = "19.1.0-www-classic-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-dev.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16704,10 +16704,10 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.1.0-www-modern-19ca800c-20250131",
version: "19.1.0-www-modern-8bda7155-20250204",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-www-modern-19ca800c-20250131"
reconcilerVersion: "19.1.0-www-modern-8bda7155-20250204"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -16741,7 +16741,7 @@ __DEV__ &&
exports.Shape = Shape;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.1.0-www-modern-19ca800c-20250131";
exports.version = "19.1.0-www-modern-8bda7155-20250204";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-prod.classic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10813,10 +10813,10 @@ var slice = Array.prototype.slice,
})(React.Component);
var internals$jscomp$inline_1512 = {
bundleType: 0,
version: "19.1.0-www-classic-19ca800c-20250131",
version: "19.1.0-www-classic-8bda7155-20250204",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-www-classic-19ca800c-20250131"
reconcilerVersion: "19.1.0-www-classic-8bda7155-20250204"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1513 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand All @@ -10842,4 +10842,4 @@ exports.RadialGradient = RadialGradient;
exports.Shape = TYPES.SHAPE;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.1.0-www-classic-19ca800c-20250131";
exports.version = "19.1.0-www-classic-8bda7155-20250204";
6 changes: 3 additions & 3 deletions compiled/facebook-www/ReactART-prod.modern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10533,10 +10533,10 @@ var slice = Array.prototype.slice,
})(React.Component);
var internals$jscomp$inline_1485 = {
bundleType: 0,
version: "19.1.0-www-modern-19ca800c-20250131",
version: "19.1.0-www-modern-8bda7155-20250204",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-www-modern-19ca800c-20250131"
reconcilerVersion: "19.1.0-www-modern-8bda7155-20250204"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1486 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand All @@ -10562,4 +10562,4 @@ exports.RadialGradient = RadialGradient;
exports.Shape = TYPES.SHAPE;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.1.0-www-modern-19ca800c-20250131";
exports.version = "19.1.0-www-modern-8bda7155-20250204";
Loading

0 comments on commit e401203

Please sign in to comment.