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 committed Feb 4, 2025
1 parent 0c2639f commit 3f18106
Show file tree
Hide file tree
Showing 23 changed files with 1,428 additions and 1,084 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-19ca800c-20250131
19.1.0-native-fb-8bda7155-20250204
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<f20ead02fe1607d1118311ad20dbb98a>>
* @generated SignedSource<<ff794dbb4124d92d30a18466f5cb2845>>
*/

"use strict";
Expand Down Expand Up @@ -428,5 +428,5 @@ __DEV__ &&
exports.useFormStatus = function () {
return resolveDispatcher().useHostTransitionStatus();
};
exports.version = "19.1.0-native-fb-19ca800c-20250131";
exports.version = "19.1.0-native-fb-8bda7155-20250204";
})();
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<ec1b2dae45e60236688f80bf9a05a872>>
* @generated SignedSource<<6c3c15356f44e521258bc6b36c04e239>>
*/

"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-19ca800c-20250131";
exports.version = "19.1.0-native-fb-8bda7155-20250204";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<ec1b2dae45e60236688f80bf9a05a872>>
* @generated SignedSource<<6c3c15356f44e521258bc6b36c04e239>>
*/

"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-19ca800c-20250131";
exports.version = "19.1.0-native-fb-8bda7155-20250204";

Large diffs are not rendered by default.

Loading

0 comments on commit 3f18106

Please sign in to comment.