Remove useId semantics from View Transition name generation

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -37,7 +37,6 @@ import type {
   OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
-import {assignViewTransitionAutoName} from './ReactFiberViewTransitionComponent';
 import type {
   Cache,
   CacheComponentState,
@@ -3538,24 +3537,13 @@ function updateViewTransition(
   renderLanes: Lanes,
 ) {
   const pendingProps: ViewTransitionProps = workInProgress.pendingProps;
-  const instance: ViewTransitionState = workInProgress.stateNode;
   if (pendingProps.name != null && pendingProps.name !== 'auto') {
     // Explicitly named boundary. We track it so that we can pair it up with another explicit
     // boundary if we get deleted.
     workInProgress.flags |=
       current === null
         ? ViewTransitionNamedMount | ViewTransitionNamedStatic
         : ViewTransitionNamedStatic;
-  } else {
-    // Assign an auto generated name using the useId algorthim if an explicit one is not provided.
-    // We don't need the name yet but we do it here to allow hydration state to be used.
-    // We might end up needing these to line up if we want to Transition from dehydrated fallback
-    // to client rendered content. If we don't end up using that we could just assign an incremeting
-    // counter in the commit phase instead.
-    assignViewTransitionAutoName(pendingProps, instance);
-    if (getIsHydrating()) {
-      pushMaterializedTreeId(workInProgress);
-    }
   }
   if (__DEV__) {
     // $FlowFixMe[prop-missing]

packages/react-reconciler/src/ReactFiberViewTransitionComponent.js

@@ -12,14 +12,10 @@ import type {FiberRoot} from './ReactInternalTypes';
 import type {ViewTransitionInstance, Instance} from './ReactFiberConfig';
 
 import {
-  getWorkInProgressRoot,
+  getCommittingRoot,
   getPendingTransitionTypes,
 } from './ReactFiberWorkLoop';
 
-import {getIsHydrating} from './ReactFiberHydrationContext';
-
-import {getTreeId} from './ReactFiberTreeContext';
-
 export type ViewTransitionState = {
   autoName: null | string, // the view-transition-name to use when an explicit one is not specified
   paired: null | ViewTransitionState, // a temporary state during the commit phase if we have paired this with another instance
@@ -29,47 +25,27 @@ export type ViewTransitionState = {
 
 let globalClientIdCounter: number = 0;
 
-export function assignViewTransitionAutoName(
+export function getViewTransitionName(
   props: ViewTransitionProps,
   instance: ViewTransitionState,
 ): string {
+  if (props.name != null && props.name !== 'auto') {
+    return props.name;
+  }
   if (instance.autoName !== null) {
     return instance.autoName;
   }
 
-  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  // We assume we always call this in the commit phase.
+  const root = ((getCommittingRoot(): any): FiberRoot);
   const identifierPrefix = root.identifierPrefix;
-
-  let name;
-  if (getIsHydrating()) {
-    const treeId = getTreeId();
-    // Use a captial R prefix for server-generated ids.
-    name = '\u00AB' + identifierPrefix + 'T' + treeId + '\u00BB';
-  } else {
-    // Use a lowercase r prefix for client-generated ids.
-    const globalClientId = globalClientIdCounter++;
-    name =
-      '\u00AB' +
-      identifierPrefix +
-      't' +
-      globalClientId.toString(32) +
-      '\u00BB';
-  }
+  const globalClientId = globalClientIdCounter++;
+  const name =
+    '\u00AB' + identifierPrefix + 't' + globalClientId.toString(32) + '\u00BB';
   instance.autoName = name;
   return name;
 }
 
-export function getViewTransitionName(
-  props: ViewTransitionProps,
-  instance: ViewTransitionState,
-): string {
-  if (props.name != null && props.name !== 'auto') {
-    return props.name;
-  }
-  // We should have assigned a name by now.
-  return (instance.autoName: any);
-}
-
 function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
   if (classByType == null || typeof classByType === 'string') {
     return classByType;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -699,6 +699,10 @@ export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
 
+export function getCommittingRoot(): FiberRoot | null {
+  return pendingEffectsRoot;
+}
+
 export function getWorkInProgressRootRenderLanes(): Lanes {
   return workInProgressRootRenderLanes;
 }

packages/react-server/src/ReactFizzServer.js

@@ -2274,23 +2274,7 @@ function renderViewTransition(
 ) {
   const prevKeyPath = task.keyPath;
   task.keyPath = keyPath;
-  if (props.name != null && props.name !== 'auto') {
-    renderNodeDestructive(request, task, props.children, -1);
-  } else {
-    // This will be auto-assigned a name which claims a "useId" slot.
-    // This component materialized an id. We treat this as its own level, with
-    // a single "child" slot.
-    const prevTreeContext = task.treeContext;
-    const totalChildren = 1;
-    const index = 0;
-    // Modify the id context. Because we'll need to reset this if something
-    // suspends or errors, we'll use the non-destructive render path.
-    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
-    renderNode(request, task, props.children, -1);
-    // Like the other contexts, this does not need to be in a finally block
-    // because renderNode takes care of unwinding the stack.
-    task.treeContext = prevTreeContext;
-  }
+  renderNodeDestructive(request, task, props.children, -1);
   task.keyPath = prevKeyPath;
 }