Use the same flags as Should/MaySuspendCommit to track named view transitions

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -97,6 +97,7 @@ import {
   Passive,
   DidDefer,
   ViewTransitionNamedStatic,
+  ViewTransitionNamedMount,
   LayoutStatic,
 } from './ReactFiberFlags';
 import {
@@ -3242,7 +3243,10 @@ function updateViewTransition(
   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 |= ViewTransitionNamedStatic;
+    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.

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -4808,6 +4808,10 @@ export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
 // already in the "current" tree. Because their visibility has changed, the
 // browser may not have prerendered them yet. So we check the MaySuspendCommit
 // flag instead.
+//
+// Note that MaySuspendCommit and ShouldSuspendCommit also includes named
+// ViewTransitions so that we know to also visit those to collect appearing
+// pairs.
 let suspenseyCommitFlag = ShouldSuspendCommit;
 export function accumulateSuspenseyCommit(finishedWork: Fiber): void {
   appearingViewTransitions = null;
@@ -4889,6 +4893,29 @@ function accumulateSuspenseyCommitOnFiber(fiber: Fiber) {
       }
       break;
     }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if ((fiber.flags & suspenseyCommitFlag) !== NoFlags) {
+          const props: ViewTransitionProps = fiber.memoizedProps;
+          const name: ?string | 'auto' = props.name;
+          if (name != null && name !== 'auto') {
+            // This is a named ViewTransition being mounted or reappearing. Let's add it to
+            // the map so we can match it with deletions later.
+            if (appearingViewTransitions === null) {
+              appearingViewTransitions = new Map();
+            }
+            // Reset the pair in case we didn't end up restoring the instance in previous commits.
+            // This shouldn't really happen anymore but just in case. We could maybe add an invariant.
+            const instance: ViewTransitionState = fiber.stateNode;
+            instance.paired = null;
+            appearingViewTransitions.set(name, instance);
+          }
+        }
+        recursivelyAccumulateSuspenseyCommit(fiber);
+        break;
+      }
+      // Fallthrough
+    }
     default: {
       recursivelyAccumulateSuspenseyCommit(fiber);
     }

packages/react-reconciler/src/ReactFiberFlags.js

@@ -44,6 +44,7 @@ export const StoreConsistency = /*             */ 0b0000000000000000100000000000
 // possible, because we're about to run out of bits.
 export const ScheduleRetry = StoreConsistency;
 export const ShouldSuspendCommit = Visibility;
+export const ViewTransitionNamedMount = ShouldSuspendCommit;
 export const DidDefer = ContentReset;
 export const FormReset = Snapshot;
 export const AffectedParentLayout = ContentReset;
@@ -74,8 +75,10 @@ export const PassiveStatic = /*                */ 0b0000000100000000000000000000
 export const MaySuspendCommit = /*             */ 0b0000001000000000000000000000000;
 // ViewTransitionNamedStatic tracks explicitly name ViewTransition components deeply
 // that might need to be visited during clean up. This is similar to SnapshotStatic
-// if there was any other use for it.
-export const ViewTransitionNamedStatic = /*    */ SnapshotStatic;
+// if there was any other use for it. It also needs to run in the same phase as
+// MaySuspendCommit tracking.
+export const ViewTransitionNamedStatic =
+  /*    */ SnapshotStatic | MaySuspendCommit;
 // ViewTransitionStatic tracks whether there are an ViewTransition components from
 // the nearest HostComponent down. It resets at every HostComponent level.
 export const ViewTransitionStatic = /*         */ 0b0000010000000000000000000000000;