Skip to content

Commit 96eb84e

Browse files
authored
Claim the useId name space for every auto named ViewTransition (facebook#33200)
This is a partial revert of facebook#33094. It's true that we don't need the server and client ViewTransition names to line up. However the server does need to be able to generate deterministic names for itself. The cheapest way to do that is using the useId algorithm. When it's used by the server, the client needs to also materialize an ID even if it doesn't use it.
1 parent 63d664b commit 96eb84e

File tree

2 files changed

+23
-1
lines changed

2 files changed

+23
-1
lines changed

packages/react-reconciler/src/ReactFiberBeginWork.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3543,6 +3543,12 @@ function updateViewTransition(
35433543
current === null
35443544
? ViewTransitionNamedMount | ViewTransitionNamedStatic
35453545
: ViewTransitionNamedStatic;
3546+
} else {
3547+
// The server may have used useId to auto-assign a generated name for this boundary.
3548+
// We push a materialization to ensure child ids line up with the server.
3549+
if (getIsHydrating()) {
3550+
pushMaterializedTreeId(workInProgress);
3551+
}
35463552
}
35473553
if (__DEV__) {
35483554
// $FlowFixMe[prop-missing]

packages/react-server/src/ReactFizzServer.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2273,7 +2273,23 @@ function renderViewTransition(
22732273
) {
22742274
const prevKeyPath = task.keyPath;
22752275
task.keyPath = keyPath;
2276-
renderNodeDestructive(request, task, props.children, -1);
2276+
if (props.name != null && props.name !== 'auto') {
2277+
renderNodeDestructive(request, task, props.children, -1);
2278+
} else {
2279+
// This will be auto-assigned a name which claims a "useId" slot.
2280+
// This component materialized an id. We treat this as its own level, with
2281+
// a single "child" slot.
2282+
const prevTreeContext = task.treeContext;
2283+
const totalChildren = 1;
2284+
const index = 0;
2285+
// Modify the id context. Because we'll need to reset this if something
2286+
// suspends or errors, we'll use the non-destructive render path.
2287+
task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
2288+
renderNode(request, task, props.children, -1);
2289+
// Like the other contexts, this does not need to be in a finally block
2290+
// because renderNode takes care of unwinding the stack.
2291+
task.treeContext = prevTreeContext;
2292+
}
22772293
task.keyPath = prevKeyPath;
22782294
}
22792295

0 commit comments

Comments
 (0)