Skip to content

Commit 4ec413b

Browse files
sebmarkbagesebmarkbage
committed
[Fiber] Fix hydration of useId in SuspenseList (#33491)
Includes #31412. The issue is that `pushTreeFork` stores some global state when reconcile children. This gets popped by `popTreeContext` in `completeWork`. Normally `completeWork` returns its own `Fiber` again if it wants to do a second pass which will call `pushTreeFork` again in the next pass. However, `SuspenseList` doesn't return itself, it returns the next child to work on. The fix is to keep track of the count and push it again it when we return the next child to attempt. There are still some outstanding issues with hydration. Like the backwards test still has the wrong behavior in it because it hydrates backwards and so it picks up the DOM nodes in reverse order. `tail="hidden"` also doesn't work correctly. There's also another issue with `useId` and `AsyncIterable` in SuspenseList when there's an unknown number of children. We don't support those showing one at a time yet though so it's not an issue yet. To fix it we need to add variable total count to the `useId` algorithm. E.g. by falling back to varint encoding. --------- Co-authored-by: Rick Hanlon <[email protected]> Co-authored-by: Ricky <[email protected]> DiffTrain build for [c38e268](c38e268)
1 parent fc1c5a2 commit 4ec413b

34 files changed

+1420
-1132
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4df098c4c2c51a033592ebc84abc47cc49a6bfb2
1+
c38e26897848374c34ac6b651fce4a9088ed4dd0

‎compiled/facebook-www/REVISION_TRANSFORMS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4df098c4c2c51a033592ebc84abc47cc49a6bfb2
1+
c38e26897848374c34ac6b651fce4a9088ed4dd0

‎compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-classic-4df098c4-20250609";
1540+
exports.version = "19.2.0-www-classic-c38e2689-20250609";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1537,7 +1537,7 @@ __DEV__ &&
15371537
exports.useTransition = function () {
15381538
return resolveDispatcher().useTransition();
15391539
};
1540-
exports.version = "19.2.0-www-modern-4df098c4-20250609";
1540+
exports.version = "19.2.0-www-modern-c38e2689-20250609";
15411541
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15421542
"function" ===
15431543
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-classic-4df098c4-20250609";
638+
exports.version = "19.2.0-www-classic-c38e2689-20250609";

‎compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
635635
exports.useTransition = function () {
636636
return ReactSharedInternals.H.useTransition();
637637
};
638-
exports.version = "19.2.0-www-modern-4df098c4-20250609";
638+
exports.version = "19.2.0-www-modern-c38e2689-20250609";

‎compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-classic-4df098c4-20250609";
642+
exports.version = "19.2.0-www-classic-c38e2689-20250609";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ exports.useSyncExternalStore = function (
639639
exports.useTransition = function () {
640640
return ReactSharedInternals.H.useTransition();
641641
};
642-
exports.version = "19.2.0-www-modern-4df098c4-20250609";
642+
exports.version = "19.2.0-www-modern-c38e2689-20250609";
643643
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
644644
"function" ===
645645
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8341,7 +8341,8 @@ __DEV__ &&
83418341
isBackwards,
83428342
tail,
83438343
lastContentRow,
8344-
tailMode
8344+
tailMode,
8345+
treeForkCount
83458346
) {
83468347
var renderState = workInProgress.memoizedState;
83478348
null === renderState
@@ -8351,14 +8352,16 @@ __DEV__ &&
83518352
renderingStartTime: 0,
83528353
last: lastContentRow,
83538354
tail: tail,
8354-
tailMode: tailMode
8355+
tailMode: tailMode,
8356+
treeForkCount: treeForkCount
83558357
})
83568358
: ((renderState.isBackwards = isBackwards),
83578359
(renderState.rendering = null),
83588360
(renderState.renderingStartTime = 0),
83598361
(renderState.last = lastContentRow),
83608362
(renderState.tail = tail),
8361-
(renderState.tailMode = tailMode));
8363+
(renderState.tailMode = tailMode),
8364+
(renderState.treeForkCount = treeForkCount));
83628365
}
83638366
function updateSuspenseListComponent(current, workInProgress, renderLanes) {
83648367
var nextProps = workInProgress.pendingProps,
@@ -8538,7 +8541,8 @@ __DEV__ &&
85388541
!1,
85398542
revealOrder,
85408543
renderLanes,
8541-
tailMode
8544+
tailMode,
8545+
0
85428546
);
85438547
break;
85448548
case "backwards":
@@ -8561,11 +8565,19 @@ __DEV__ &&
85618565
!0,
85628566
renderLanes,
85638567
null,
8564-
tailMode
8568+
tailMode,
8569+
0
85658570
);
85668571
break;
85678572
case "together":
8568-
initSuspenseListRenderState(workInProgress, !1, null, null, void 0);
8573+
initSuspenseListRenderState(
8574+
workInProgress,
8575+
!1,
8576+
null,
8577+
null,
8578+
void 0,
8579+
0
8580+
);
85698581
break;
85708582
default:
85718583
workInProgress.memoizedState = null;
@@ -19105,10 +19117,10 @@ __DEV__ &&
1910519117
(function () {
1910619118
var internals = {
1910719119
bundleType: 1,
19108-
version: "19.2.0-www-classic-4df098c4-20250609",
19120+
version: "19.2.0-www-classic-c38e2689-20250609",
1910919121
rendererPackageName: "react-art",
1911019122
currentDispatcherRef: ReactSharedInternals,
19111-
reconcilerVersion: "19.2.0-www-classic-4df098c4-20250609"
19123+
reconcilerVersion: "19.2.0-www-classic-c38e2689-20250609"
1911219124
};
1911319125
internals.overrideHookState = overrideHookState;
1911419126
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -19142,7 +19154,7 @@ __DEV__ &&
1914219154
exports.Shape = Shape;
1914319155
exports.Surface = Surface;
1914419156
exports.Text = Text;
19145-
exports.version = "19.2.0-www-classic-4df098c4-20250609";
19157+
exports.version = "19.2.0-www-classic-c38e2689-20250609";
1914619158
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1914719159
"function" ===
1914819160
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8172,7 +8172,8 @@ __DEV__ &&
81728172
isBackwards,
81738173
tail,
81748174
lastContentRow,
8175-
tailMode
8175+
tailMode,
8176+
treeForkCount
81768177
) {
81778178
var renderState = workInProgress.memoizedState;
81788179
null === renderState
@@ -8182,14 +8183,16 @@ __DEV__ &&
81828183
renderingStartTime: 0,
81838184
last: lastContentRow,
81848185
tail: tail,
8185-
tailMode: tailMode
8186+
tailMode: tailMode,
8187+
treeForkCount: treeForkCount
81868188
})
81878189
: ((renderState.isBackwards = isBackwards),
81888190
(renderState.rendering = null),
81898191
(renderState.renderingStartTime = 0),
81908192
(renderState.last = lastContentRow),
81918193
(renderState.tail = tail),
8192-
(renderState.tailMode = tailMode));
8194+
(renderState.tailMode = tailMode),
8195+
(renderState.treeForkCount = treeForkCount));
81938196
}
81948197
function updateSuspenseListComponent(current, workInProgress, renderLanes) {
81958198
var nextProps = workInProgress.pendingProps,
@@ -8369,7 +8372,8 @@ __DEV__ &&
83698372
!1,
83708373
revealOrder,
83718374
renderLanes,
8372-
tailMode
8375+
tailMode,
8376+
0
83738377
);
83748378
break;
83758379
case "backwards":
@@ -8392,11 +8396,19 @@ __DEV__ &&
83928396
!0,
83938397
renderLanes,
83948398
null,
8395-
tailMode
8399+
tailMode,
8400+
0
83968401
);
83978402
break;
83988403
case "together":
8399-
initSuspenseListRenderState(workInProgress, !1, null, null, void 0);
8404+
initSuspenseListRenderState(
8405+
workInProgress,
8406+
!1,
8407+
null,
8408+
null,
8409+
void 0,
8410+
0
8411+
);
84008412
break;
84018413
default:
84028414
workInProgress.memoizedState = null;
@@ -18877,10 +18889,10 @@ __DEV__ &&
1887718889
(function () {
1887818890
var internals = {
1887918891
bundleType: 1,
18880-
version: "19.2.0-www-modern-4df098c4-20250609",
18892+
version: "19.2.0-www-modern-c38e2689-20250609",
1888118893
rendererPackageName: "react-art",
1888218894
currentDispatcherRef: ReactSharedInternals,
18883-
reconcilerVersion: "19.2.0-www-modern-4df098c4-20250609"
18895+
reconcilerVersion: "19.2.0-www-modern-c38e2689-20250609"
1888418896
};
1888518897
internals.overrideHookState = overrideHookState;
1888618898
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -18914,7 +18926,7 @@ __DEV__ &&
1891418926
exports.Shape = Shape;
1891518927
exports.Surface = Surface;
1891618928
exports.Text = Text;
18917-
exports.version = "19.2.0-www-modern-4df098c4-20250609";
18929+
exports.version = "19.2.0-www-modern-c38e2689-20250609";
1891818930
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1891918931
"function" ===
1892018932
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)