Repository: facebook/react
Pull request: Add more phases to the ReactFiberApplyGesture

Stacked on #32585 and #32605.

This adds more loops for the phases of "Apply Gesture". It doesn't implement the interesting bit yet like adding view-transition-names and measurements. I'll do that in a separate PR to keep reviewing easier.

The three phases of this approach is roughly:

- Clone and apply names to the "old" state.
- Inside startViewTransition: Apply names to the "new" state. Measure both the "old" and "new" state to know whether to cancel some of them. Delete the clones which will include all the "old" names.
- After startViewTransition: Restore "new" names back to no view-transition-name.

Since we don't have any other Effects in these phases we have a bit more flexibility and we can avoid extra phases that traverse the tree. I've tried to avoid any additional passes.

An interesting consequence of this approach is that we could measure both the "old" and "new" state before `startViewTransition`. This would be more efficient because we wouldn't need to take View Transition snapshots of parts of the tree that won't actually animate. However, that would require an extra pass and force layout earlier. It would also have different semantics from the fire-and-forget View Transitions because we could optimize better which can be visible. It would also not account for any late mutations. So I decided to instead let the layout be computed by painting as usual and then measure both "old" and "new" inside the startViewTransition instead. Then canceling anything that doesn't animate to keep it consistent.

Unfortunately, though there's not a lot of code sharing possible in these phases because the strategy is so different with the cloning and because the animation is performed in reverse. The "finishedWork" Fiber represents the "old" state and the "current" Fiber represents the "new" state.

The most complicated phase is the cloning. I actually ended up having to make a very different pattern from the other phases and CommitWork in general. Because we have to clone as we go and also do other things like apply names and finding pairs, it has more phases. I ended up with an approach that uses three different loops. The outer one for updated trees, one for inserted trees that don't need cloning (doesn't include reappearing offscreen) and one for not updated trees that still need cloning. Inside each loop it can also be in different phases which I track with the `visitPhase` enum - this pattern is kind of new.

Additionally, we need to measure the cloned nodes after we've applied mutations to them and we have to wait until the whole tree is inserted. We don't have a reference to these DOM elements in the Fiber tree since that still refers to the original ones. We need to store the cloned elements somewhere. So I added a temporary field on the ViewTransitionState to keep track of any clones owned by that ViewTransition.

When we deep clone an unchanged subtree we don't have DOM element instances. It wouldn't be quite safe to try to find them from the tree structure. So we need to avoid the deep clones if we might need DOM elements. Therefore we keep traversing in the case where we need to find nested ViewTransition boundaries that are either potentially affected by layout or a "pair".

For the other two phases the pattern there's a lot of code duplication since it's slightly different from the commit ones but they at least follow the same pattern. For the restore phase I was actually able to reuse most of the code.

I don't love how much code this is.


Changed files:
filename: packages/react-reconciler/src/ReactFiber.js
patch: @@ -878,6 +878,7 @@ export function createFiberFromViewTransition(
   const instance: ViewTransitionState = {
     autoName: null,
     paired: null,
+    clones: null,
     ref: null,
   };
   fiber.stateNode = instance;

filename: packages/react-reconciler/src/ReactFiberApplyGesture.js
patch: @@ -13,6 +13,11 @@ import type {Instance, TextInstance} from './ReactFiberConfig';
 
 import type {OffscreenState} from './ReactFiberActivityComponent';
 
+import type {
+  ViewTransitionState,
+  ViewTransitionProps,
+} from './ReactFiberViewTransitionComponent';
+
 import {
   cloneMutableInstance,
   cloneMutableTextInstance,
@@ -40,6 +45,8 @@ import {
   ContentReset,
   NoFlags,
   Visibility,
+  ViewTransitionNamedStatic,
+  ViewTransitionStatic,
 } from './ReactFiberFlags';
 import {
   HostComponent,
@@ -50,33 +57,295 @@ import {
   OffscreenComponent,
   ViewTransitionComponent,
 } from './ReactWorkTags';
+import {
+  restoreEnterOrExitViewTransitions,
+  restoreNestedViewTransitions,
+} from './ReactFiberCommitViewTransitions';
 
 let didWarnForRootClone = false;
 
 function detectMutationOrInsertClones(finishedWork: Fiber): boolean {
   return true;
 }
 
-let unhideHostChildren = false;
+const CLONE_UPDATE = 0; // Mutations in this subtree or potentially affected by layout.
+const CLONE_EXIT = 1; // Inside a reappearing offscreen before the next ViewTransition or HostComponent.
+const CLONE_UNHIDE = 2; // Inside a reappearing offscreen before the next HostComponent.
+const CLONE_APPEARING_PAIR = 3; // Like UNHIDE but we're already inside the first Host Component only finding pairs.
+const CLONE_UNCHANGED = 4; // Nothing in this tree was changed but we're still walking to clone it.
+const INSERT_EXIT = 5; // Inside a newly mounted tree before the next ViewTransition or HostComponent.
+const INSERT_APPEND = 6; // Inside a newly mounted tree before the next HostComponent.
+const INSERT_APPEARING_PAIR = 7; // Inside a newly mounted tree only finding pairs.
+type VisitPhase = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+
+function trackDeletedPairViewTransitions(deletion: Fiber): void {
+  if ((deletion.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = deletion.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState === null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const props: ViewTransitionProps = child.memoizedProps;
+        const name = props.name;
+        if (name != null && name !== 'auto') {
+          // TODO: Find a pair
+        }
+      }
+      trackDeletedPairViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+function trackEnterViewTransitions(deletion: Fiber): void {
+  if (deletion.tag === ViewTransitionComponent) {
+    const props: ViewTransitionProps = deletion.memoizedProps;
+    const name = props.name;
+    if (name != null && name !== 'auto') {
+      // TODO: Find a pair
+    }
+    // Look for more pairs deeper in the tree.
+    trackDeletedPairViewTransitions(deletion);
+  } else if ((deletion.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    let child = deletion.child;
+    while (child !== null) {
+      trackEnterViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    trackDeletedPairViewTransitions(deletion);
+  }
+}
+
+function recursivelyInsertNew(
+  parentFiber: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+): void {
+  if (
+    visitPhase === INSERT_APPEARING_PAIR &&
+    parentViewTransition === null &&
+    (parentFiber.subtreeFlags & ViewTransitionNamedStatic) === NoFlags
+  ) {
+    // We're just searching for pairs but we have reached the end.
+    return;
+  }
+  let child = parentFiber.child;
+  while (child !== null) {
+    recursivelyInsertNewFiber(
+      child,
+      hostParentClone,
+      parentViewTransition,
+      visitPhase,
+    );
+    child = child.sibling;
+  }
+}
+
+function recursivelyInsertNewFiber(
+  finishedWork: Fiber,
+  hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
+): void {
+  switch (finishedWork.tag) {
+    case HostHoistable: {
+      if (supportsResources) {
+        // TODO: Hoistables should get optimistically inserted and then removed.
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+        break;
+      }
+      // Fall through
+    }
+    case HostSingleton: {
+      if (supportsSingletons) {
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+
+        if (__DEV__) {
+          // We cannot apply mutations to Host Singletons since by definition
+          // they cannot be cloned. Therefore we warn in DEV if this commit
+          // had any effect.
+          if (finishedWork.flags & Update) {
+            console.error(
+              'useSwipeTransition() caused something to render a new <%s>. ' +
+                'This is not possible in the current implementation. ' +
+                "Make sure that the swipe doesn't mount any new <%s> elements.",
+              finishedWork.type,
+              finishedWork.type,
+            );
+          }
+        }
+        break;
+      }
+      // Fall through
+    }
+    case HostComponent: {
+      const instance: Instance = finishedWork.stateNode;
+      // For insertions we don't need to clone. It's already new state node.
+      if (visitPhase !== INSERT_APPEARING_PAIR) {
+        appendChild(hostParentClone, instance);
+        recursivelyInsertNew(
+          finishedWork,
+          instance,
+          null,
+          INSERT_APPEARING_PAIR,
+        );
+      } else {
+        recursivelyInsertNew(finishedWork, instance, null, visitPhase);
+      }
+      if (parentViewTransition !== null) {
+        if (parentViewTransition.clones === null) {
+          parentViewTransition.clones = [instance];
+        } else {
+          parentViewTransition.clones.push(instance);
+        }
+      }
+      break;
+    }
+    case HostText: {
+      const textInstance: TextInstance = finishedWork.stateNode;
+      if (textInstance === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+      // For insertions we don't need to clone. It's already new state node.
+      if (visitPhase !== INSERT_APPEARING_PAIR) {
+        appendChild(hostParentClone, textInstance);
+      }
+      break;
+    }
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
+      if (!isHidden) {
+        // Only insert nodes if this tree is going to be visible. No need to
+        // insert invisible content.
+        // Since there was no mutation to this node, it couldn't have changed
+        // visibility so we don't need to update visitPhase here.
+        recursivelyInsertNew(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      const prevMutationContext = pushMutationContext();
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      // TODO: If this was already cloned by a previous pass we can reuse those clones.
+      viewTransitionState.clones = null;
+      let nextPhase;
+      if (visitPhase === INSERT_EXIT) {
+        // This was an Enter of a ViewTransition. We now move onto inserting the inner
+        // HostComponents and finding inner pairs.
+        nextPhase = INSERT_APPEND;
+        // TODO: Mark the name and find a pair.
+      } else {
+        nextPhase = visitPhase;
+      }
+      recursivelyInsertNew(
+        finishedWork,
+        hostParentClone,
+        viewTransitionState,
+        nextPhase,
+      );
+      popMutationContext(prevMutationContext);
+      break;
+    default: {
+      recursivelyInsertNew(
+        finishedWork,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
+      break;
+    }
+  }
+}
 
 function recursivelyInsertClonesFromExistingTree(
   parentFiber: Fiber,
   hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
 ): void {
   let child = parentFiber.child;
   while (child !== null) {
     switch (child.tag) {
       case HostComponent: {
         const instance: Instance = child.stateNode;
-        // If we have no mutations in this subtree, we just need to make a deep clone.
-        const clone: Instance = cloneMutableInstance(instance, true);
+        let nextPhase: VisitPhase;
+        switch (visitPhase) {
+          case CLONE_EXIT:
+          case CLONE_UNHIDE:
+          case CLONE_APPEARING_PAIR:
+            // If this was an unhide, we need to keep going if there are any named
+            // pairs in this subtree, since they might need to be marked.
+            nextPhase =
+              (child.subtreeFlags & ViewTransitionNamedStatic) !== NoFlags
+                ? CLONE_APPEARING_PAIR
+                : CLONE_UNCHANGED;
+            break;
+          default:
+            // We've found any "layout" View Transitions at this point so we can bail.
+            nextPhase = CLONE_UNCHANGED;
+        }
+        let clone: Instance;
+        if (nextPhase !== CLONE_UNCHANGED) {
+          // We might need a handle on these clones, so we need to do a shallow clone
+          // and keep going.
+          clone = cloneMutableInstance(instance, false);
+          recursivelyInsertClonesFromExistingTree(
+            child,
+            clone,
+            null,
+            nextPhase,
+          );
+        } else {
+          // If we have no mutations in this subtree, and we don't need a handle on the
+          // clones, then we can do a deep clone instead and bailout.
+          clone = cloneMutableInstance(instance, true);
+          // TODO: We may need to transfer some DOM state such as scroll position
+          // for the deep clones.
+          // TODO: If there's a manual view-transition-name inside the clone we
+          // should ideally remove it from the original and then restore it in mutation
+          // phase. Otherwise it leads to duplicate names.
+        }
         appendChild(hostParentClone, clone);
-        // TODO: We may need to transfer some DOM state such as scroll position
-        // for the deep clones.
-        // TODO: If there's a manual view-transition-name inside the clone we
-        // should ideally remove it from the original and then restore it in mutation
-        // phase. Otherwise it leads to duplicate names.
-        if (unhideHostChildren) {
+        if (parentViewTransition !== null) {
+          if (parentViewTransition.clones === null) {
+            parentViewTransition.clones = [clone];
+          } else {
+            parentViewTransition.clones.push(clone);
+          }
+        }
+        if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
           unhideInstance(clone, child.memoizedProps);
         }
         break;
@@ -91,7 +360,7 @@ function recursivelyInsertClonesFromExistingTree(
         }
         const clone = cloneMutableTextInstance(textInstance);
         appendChild(hostParentClone, clone);
-        if (unhideHostChildren) {
+        if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
           unhideTextInstance(clone, child.memoizedProps);
         }
         break;
@@ -108,21 +377,52 @@ function recursivelyInsertClonesFromExistingTree(
           // clone invisible content.
           // TODO: If this is visible but detached it should still be cloned.
           // Since there was no mutation to this node, it couldn't have changed
-          // visibility so we don't need to update unhideHostChildren here.
-          recursivelyInsertClonesFromExistingTree(child, hostParentClone);
+          // visibility so we don't need to update visitPhase here.
+          recursivelyInsertClonesFromExistingTree(
+            child,
+            hostParentClone,
+            parentViewTransition,
+            visitPhase,
+          );
         }
         break;
       }
       case ViewTransitionComponent:
         const prevMutationContext = pushMutationContext();
+        const viewTransitionState: ViewTransitionState = child.stateNode;
         // TODO: If this was already cloned by a previous pass we can reuse those clones.
-        recursivelyInsertClonesFromExistingTree(child, hostParentClone);
-        // TODO: Do we need to track whether this should have a name applied?
+        viewTransitionState.clones = null;
+        let nextPhase;
+        if (visitPhase === CLONE_EXIT) {
+          // This was an Enter of a ViewTransition. We now move onto unhiding the inner
+          // HostComponents and finding inner pairs.
+          nextPhase = CLONE_UNHIDE;
+          // TODO: Mark the name and find a pair.
+        } else if (visitPhase === CLONE_UPDATE) {
+          // If the tree had no mutations and we've found the top most ViewTransition
+          // then this is the one we might apply the "layout" state too if it has changed
+          // position. After we've found its HostComponents we can bail out.
+          nextPhase = CLONE_UNCHANGED;
+        } else {
+          nextPhase = visitPhase;
+        }
+        recursivelyInsertClonesFromExistingTree(
+          child,
+          hostParentClone,
+          viewTransitionState,
+          nextPhase,
+        );
+        // TODO: Only the first level should track if this was s
         // child.flags |= Update;
         popMutationContext(prevMutationContext);
         break;
       default: {
-        recursivelyInsertClonesFromExistingTree(child, hostParentClone);
+        recursivelyInsertClonesFromExistingTree(
+          child,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
         break;
       }
     }
@@ -133,12 +433,14 @@ function recursivelyInsertClonesFromExistingTree(
 function recursivelyInsertClones(
   parentFiber: Fiber,
   hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
 ) {
   const deletions = parentFiber.deletions;
   if (deletions !== null) {
     for (let i = 0; i < deletions.length; i++) {
-      // const childToDelete = deletions[i];
-      // TODO
+      const childToDelete = deletions[i];
+      trackEnterViewTransitions(childToDelete);
     }
   }
 
@@ -149,21 +451,45 @@ function recursivelyInsertClones(
     // If we have mutations or if this is a newly inserted tree, clone as we go.
     let child = parentFiber.child;
     while (child !== null) {
-      insertDestinationClonesOfFiber(child, hostParentClone);
+      insertDestinationClonesOfFiber(
+        child,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
       child = child.sibling;
     }
   } else {
     // Once we reach a subtree with no more mutations we can bail out.
     // However, we must still insert deep clones of the HostComponents.
-    recursivelyInsertClonesFromExistingTree(parentFiber, hostParentClone);
+    recursivelyInsertClonesFromExistingTree(
+      parentFiber,
+      hostParentClone,
+      parentViewTransition,
+      visitPhase,
+    );
   }
 }
 
 function insertDestinationClonesOfFiber(
   finishedWork: Fiber,
   hostParentClone: Instance,
+  parentViewTransition: null | ViewTransitionState,
+  visitPhase: VisitPhase,
 ) {
   const current = finishedWork.alternate;
+  if (current === null) {
+    // This is a newly mounted subtree. Insert any HostComponents and trigger
+    // Enter transitions.
+    recursivelyInsertNewFiber(
+      finishedWork,
+      hostParentClone,
+      parentViewTransition,
+      INSERT_EXIT,
+    );
+    return;
+  }
+
   const flags = finishedWork.flags;
   // The effect flag should be checked *after* we refine the type of fiber,
   // because the fiber tag is more specific. An exception is any flag related
@@ -172,55 +498,55 @@ function insertDestinationClonesOfFiber(
     case HostHoistable: {
       if (supportsResources) {
         // TODO: Hoistables should get optimistically inserted and then removed.
-        recursivelyInsertClones(finishedWork, hostParentClone);
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
         break;
       }
       // Fall through
     }
     case HostSingleton: {
       if (supportsSingletons) {
-        recursivelyInsertClones(finishedWork, hostParentClone);
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          visitPhase,
+        );
         if (__DEV__) {
           // We cannot apply mutations to Host Singletons since by definition
           // they cannot be cloned. Therefore we warn in DEV if this commit
           // had any effect.
           if (flags & Update) {
-            if (current === null) {
-              console.error(
-                'useSwipeTransition() caused something to render a new <%s>. ' +
-                  'This is not possible in the current implementation. ' +
-                  "Make sure that the swipe doesn't mount any new <%s> elements.",
-                finishedWork.type,
-                finishedWork.type,
-              );
-            } else {
-              const newProps = finishedWork.memoizedProps;
-              const oldProps = current.memoizedProps;
-              const instance = finishedWork.stateNode;
-              const type = finishedWork.type;
-              const prev = pushMutationContext();
-
-              try {
-                // Since we currently don't have a separate diffing algorithm for
-                // individual properties, the Update flag can be a false positive.
-                // We have to apply the new props first o detect any mutations and
-                // then revert them.
-                commitUpdate(instance, type, oldProps, newProps, finishedWork);
-                if (viewTransitionMutationContext) {
-                  console.error(
-                    'useSwipeTransition() caused something to mutate <%s>. ' +
-                      'This is not possible in the current implementation. ' +
-                      "Make sure that the swipe doesn't update any state which " +
-                      'causes <%s> to change.',
-                    finishedWork.type,
-                    finishedWork.type,
-                  );
-                }
-                // Revert
-                commitUpdate(instance, type, newProps, oldProps, finishedWork);
-              } finally {
-                popMutationContext(prev);
+            const newProps = finishedWork.memoizedProps;
+            const oldProps = current.memoizedProps;
+            const instance = finishedWork.stateNode;
+            const type = finishedWork.type;
+            const prev = pushMutationContext();
+
+            try {
+              // Since we currently don't have a separate diffing algorithm for
+              // individual properties, the Update flag can be a false positive.
+              // We have to apply the new props first o detect any mutations and
+              // then revert them.
+              commitUpdate(instance, type, oldProps, newProps, finishedWork);
+              if (viewTransitionMutationContext) {
+                console.error(
+                  'useSwipeTransition() caused something to mutate <%s>. ' +
+                    'This is not possible in the current implementation. ' +
+                    "Make sure that the swipe doesn't update any state which " +
+                    'causes <%s> to change.',
+                  finishedWork.type,
+                  finishedWork.type,
+                );
               }
+              // Revert
+              commitUpdate(instance, type, newProps, oldProps, finishedWork);
+            } finally {
+              popMutationContext(prev);
             }
           }
         }
@@ -230,42 +556,46 @@ function insertDestinationClonesOfFiber(
     }
     case HostComponent: {
       const instance: Instance = finishedWork.stateNode;
-      if (current === null) {
-        // For insertions we don't need to clone. It's already new state node.
-        // TODO: Do we need to visit it for ViewTransitions though?
-        appendChild(hostParentClone, instance);
-      } else {
-        let clone: Instance;
-        if (finishedWork.child === null) {
-          // This node is terminal. We still do a deep clone in case this has user
-          // inserted content, text content or dangerouslySetInnerHTML.
-          clone = cloneMutableInstance(instance, true);
-          if (finishedWork.flags & ContentReset) {
-            resetTextContent(clone);
-          }
-        } else {
-          // If we have children we'll clone them as we walk the tree so we just
-          // do a shallow clone here.
-          clone = cloneMutableInstance(instance, false);
+      let clone: Instance;
+      if (finishedWork.child === null) {
+        // This node is terminal. We still do a deep clone in case this has user
+        // inserted content, text content or dangerouslySetInnerHTML.
+        clone = cloneMutableInstance(instance, true);
+        if (finishedWork.flags & ContentReset) {
+          resetTextContent(clone);
         }
+      } else {
+        // If we have children we'll clone them as we walk the tree so we just
+        // do a shallow clone here.
+        clone = cloneMutableInstance(instance, false);
+      }
 
-        if (flags & Update) {
-          const newProps = finishedWork.memoizedProps;
-          const oldProps = current.memoizedProps;
-          const type = finishedWork.type;
-          // Apply the delta to the clone.
-          commitUpdate(clone, type, oldProps, newProps, finishedWork);
-        }
+      if (flags & Update) {
+        const newProps = finishedWork.memoizedProps;
+        const oldProps = current.memoizedProps;
+        const type = finishedWork.type;
+        // Apply the delta to the clone.
+        commitUpdate(clone, type, oldProps, newProps, finishedWork);
+      }
 
-        if (unhideHostChildren) {
-          unhideHostChildren = false;
-          recursivelyInsertClones(finishedWork, clone);
-          appendChild(hostParentClone, clone);
-          unhideHostChildren = true;
-          unhideInstance(clone, finishedWork.memoizedProps);
+      if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+        recursivelyInsertClones(
+          finishedWork,
+          clone,
+          null,
+          CLONE_APPEARING_PAIR,
+        );
+        appendChild(hostParentClone, clone);
+        unhideInstance(clone, finishedWork.memoizedProps);
+      } else {
+        recursivelyInsertClones(finishedWork, clone, null, visitPhase);
+        appendChild(hostParentClone, clone);
+      }
+      if (parentViewTransition !== null) {
+        if (parentViewTransition.clones === null) {
+          parentViewTransition.clones = [clone];
         } else {
-          recursivelyInsertClones(finishedWork, clone);
-          appendChild(hostParentClone, clone);
+          parentViewTransition.clones.push(clone);
         }
       }
       break;
@@ -278,20 +608,15 @@ function insertDestinationClonesOfFiber(
             'caused by a bug in React. Please file an issue.',
         );
       }
-      if (current === null) {
-        // For insertions we don't need to clone. It's already new state node.
-        appendChild(hostParentClone, textInstance);
-      } else {
-        const clone = cloneMutableTextInstance(textInstance);
-        if (flags & Update) {
-          const newText: string = finishedWork.memoizedProps;
-          const oldText: string = current.memoizedProps;
-          commitTextUpdate(clone, newText, oldText);
-        }
-        appendChild(hostParentClone, clone);
-        if (unhideHostChildren) {
-          unhideTextInstance(clone, finishedWork.memoizedProps);
-        }
+      const clone = cloneMutableTextInstance(textInstance);
+      if (flags & Update) {
+        const newText: string = finishedWork.memoizedProps;
+        const oldText: string = current.memoizedProps;
+        commitTextUpdate(clone, newText, oldText);
+      }
+      appendChild(hostParentClone, clone);
+      if (visitPhase === CLONE_EXIT || visitPhase === CLONE_UNHIDE) {
+        unhideTextInstance(clone, finishedWork.memoizedProps);
       }
       break;
     }
@@ -306,17 +631,45 @@ function insertDestinationClonesOfFiber(
         // Only insert clones if this tree is going to be visible. No need to
         // clone invisible content.
         // TODO: If this is visible but detached it should still be cloned.
-        const prevUnhide = unhideHostChildren;
-        unhideHostChildren = prevUnhide || (flags & Visibility) !== NoFlags;
-        recursivelyInsertClones(finishedWork, hostParentClone);
-        unhideHostChildren = prevUnhide;
+        let nextPhase;
+        if (visitPhase === CLONE_UPDATE && (flags & Visibility) !== NoFlags) {
+          // This is the root of an appear. We need to trigger Enter transitions.
+          nextPhase = CLONE_EXIT;
+        } else {
+          nextPhase = visitPhase;
+        }
+        recursivelyInsertClones(
+          finishedWork,
+          hostParentClone,
+          parentViewTransition,
+          nextPhase,
+        );
+      } else if (current !== null && current.memoizedState === null) {
+        // Was previously mounted as visible but is now hidden.
+        trackEnterViewTransitions(current);
       }
       break;
     }
     case ViewTransitionComponent:
       const prevMutationContext = pushMutationContext();
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
       // TODO: If this was already cloned by a previous pass we can reuse those clones.
-      recursivelyInsertClones(finishedWork, hostParentClone);
+      viewTransitionState.clones = null;
+      let nextPhase;
+      if (visitPhase === CLONE_EXIT) {
+        // This was an Enter of a ViewTransition. We now move onto unhiding the inner
+        // HostComponents and finding inner pairs.
+        nextPhase = CLONE_UNHIDE;
+        // TODO: Mark the name and find a pair.
+      } else {
+        nextPhase = visitPhase;
+      }
+      recursivelyInsertClones(
+        finishedWork,
+        hostParentClone,
+        viewTransitionState,
+        nextPhase,
+      );
       if (viewTransitionMutationContext) {
         // Track that this boundary had a mutation and therefore needs to animate
         // whether it resized or not.
@@ -325,7 +678,12 @@ function insertDestinationClonesOfFiber(
       popMutationContext(prevMutationContext);
       break;
     default: {
-      recursivelyInsertClones(finishedWork, hostParentClone);
+      recursivelyInsertClones(
+        finishedWork,
+        hostParentClone,
+        parentViewTransition,
+        visitPhase,
+      );
       break;
     }
   }
@@ -337,7 +695,6 @@ export function insertDestinationClones(
   root: FiberRoot,
   finishedWork: Fiber,
 ): void {
-  unhideHostChildren = false;
   // We'll either not transition the root, or we'll transition the clone. Regardless
   // we cancel the root view transition name.
   const needsClone = detectMutationOrInsertClones(finishedWork);
@@ -356,31 +713,281 @@ export function insertDestinationClones(
     // Clone the whole root
     const rootClone = cloneRootViewTransitionContainer(root.containerInfo);
     root.gestureClone = rootClone;
-    recursivelyInsertClones(finishedWork, rootClone);
+    recursivelyInsertClones(finishedWork, rootClone, null, CLONE_UPDATE);
   } else {
     root.gestureClone = null;
     cancelRootViewTransitionName(root.containerInfo);
   }
 }
 
+function applyDeletedPairViewTransitions(deletion: Fiber): void {
+  if ((deletion.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
+    // This has no named view transitions in its subtree.
+    return;
+  }
+  let child = deletion.child;
+  while (child !== null) {
+    if (child.tag === OffscreenComponent && child.memoizedState === null) {
+      // This tree was already hidden so we skip it.
+    } else {
+      if (
+        child.tag === ViewTransitionComponent &&
+        (child.flags & ViewTransitionNamedStatic) !== NoFlags
+      ) {
+        const props: ViewTransitionProps = child.memoizedProps;
+        const name = props.name;
+        if (name != null && name !== 'auto') {
+          // TODO: Find a pair
+        }
+      }
+      applyDeletedPairViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+function applyEnterViewTransitions(deletion: Fiber): void {
+  if (deletion.tag === ViewTransitionComponent) {
+    const props: ViewTransitionProps = deletion.memoizedProps;
+    const name = props.name;
+    if (name != null && name !== 'auto') {
+      // TODO: Find a pair
+    }
+    // Look for more pairs deeper in the tree.
+    applyDeletedPairViewTransitions(deletion);
+  } else if ((deletion.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    // TODO: Check if this is a hidden Offscreen or a Portal.
+    let child = deletion.child;
+    while (child !== null) {
+      applyEnterViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    applyDeletedPairViewTransitions(deletion);
+  }
+}
+
+function measureExitViewTransitions(placement: Fiber): void {
+  if (placement.tag === ViewTransitionComponent) {
+    // const state: ViewTransitionState = placement.stateNode;
+    const props: ViewTransitionProps = placement.memoizedProps;
+    const name = props.name;
+    if (name != null && name !== 'auto') {
+      // TODO: Find a pair
+    }
+  } else if ((placement.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+    // TODO: Check if this is a hidden Offscreen or a Portal.
+    let child = placement.child;
+    while (child !== null) {
+      measureExitViewTransitions(child);
+      child = child.sibling;
+    }
+  } else {
+    // We don't need to find pairs here because we would've already found and
+    // measured the pairs inside the deletion phase.
+  }
+}
+
+function measureNestedViewTransitions(changedParent: Fiber): void {
+  let child = changedParent.child;
+  while (child !== null) {
+    if (child.tag === ViewTransitionComponent) {
+      const current = child.alternate;
+      if (current !== null) {
+        // const props: ViewTransitionProps = child.memoizedProps;
+        // const name = getViewTransitionName(props, child.stateNode);
+        // TODO: Measure both the old and new state and see if they're different.
+      }
+    } else if ((child.subtreeFlags & ViewTransitionStatic) !== NoFlags) {
+      // TODO: Check if this is a hidden Offscreen or a Portal.
+      measureNestedViewTransitions(child);
+    }
+    child = child.sibling;
+  }
+}
+
+function measureUpdateViewTransition(
+  current: Fiber,
+  finishedWork: Fiber,
+): void {
+  // TODO
+}
+
+function recursivelyApplyViewTransitions(parentFiber: Fiber) {
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      applyEnterViewTransitions(childToDelete);
+    }
+  }
+
+  if (
+    parentFiber.alternate === null ||
+    (parentFiber.subtreeFlags & MutationMask) !== NoFlags
+  ) {
+    // If we have mutations or if this is a newly inserted tree, clone as we go.
+    let child = parentFiber.child;
+    while (child !== null) {
+      applyViewTransitionsOnFiber(child);
+      child = child.sibling;
+    }
+  } else {
+    // Nothing has changed in this subtree, but the parent may have still affected
+    // its size and position. We need to measure the old and new state to see if
+    // we should animate its size and position.
+    measureNestedViewTransitions(parentFiber);
+  }
+}
+
+function applyViewTransitionsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  if (current === null) {
+    measureExitViewTransitions(finishedWork);
+    return;
+  }
+
+  const flags = finishedWork.flags;
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case HostComponent: {
+      // const instance: Instance = finishedWork.stateNode;
+      // TODO: Apply name and measure.
+      recursivelyApplyViewTransitions(finishedWork);
+      break;
+    }
+    case HostText: {
+      break;
+    }
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        if (!isHidden) {
+          measureExitViewTransitions(finishedWork);
+        } else if (current !== null && current.memoizedState === null) {
+          // Was previously mounted as visible but is now hidden.
+          applyEnterViewTransitions(current);
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      measureUpdateViewTransition(current, finishedWork);
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      viewTransitionState.clones = null; // Reset
+      recursivelyApplyViewTransitions(finishedWork);
+      break;
+    default: {
+      recursivelyApplyViewTransitions(finishedWork);
+      break;
+    }
+  }
+}
+
 // Revert insertions and apply view transition names to the "new" (current) state.
 export function applyDepartureTransitions(
   root: FiberRoot,
   finishedWork: Fiber,
 ): void {
+  // First measure and apply view-transition-names to the "new" states.
+  recursivelyApplyViewTransitions(finishedWork);
+  // Then remove the clones.
   const rootClone = root.gestureClone;
   if (rootClone !== null) {
     root.gestureClone = null;
     removeRootViewTransitionClone(root.containerInfo, rootClone);
   }
-  // TODO
+}
+
+function recursivelyRestoreViewTransitions(parentFiber: Fiber) {
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      restoreEnterOrExitViewTransitions(childToDelete);
+    }
+  }
+
+  if (
+    parentFiber.alternate === null ||
+    (parentFiber.subtreeFlags & MutationMask) !== NoFlags
+  ) {
+    // If we have mutations or if this is a newly inserted tree, clone as we go.
+    let child = parentFiber.child;
+    while (child !== null) {
+      restoreViewTransitionsOnFiber(child);
+      child = child.sibling;
+    }
+  } else {
+    // Nothing has changed in this subtree, but the parent may have still affected
+    // its size and position. We need to measure the old and new state to see if
+    // we should animate its size and position.
+    restoreNestedViewTransitions(parentFiber);
+  }
+}
+
+function restoreViewTransitionsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  if (current === null) {
+    restoreEnterOrExitViewTransitions(finishedWork);
+    return;
+  }
+
+  const flags = finishedWork.flags;
+  // The effect flag should be checked *after* we refine the type of fiber,
+  // because the fiber tag is more specific. An exception is any flag related
+  // to reconciliation, because those can be set on all fiber types.
+  switch (finishedWork.tag) {
+    case HostComponent: {
+      // const instance: Instance = finishedWork.stateNode;
+      // TODO: Restore the name.
+      recursivelyRestoreViewTransitions(finishedWork);
+      break;
+    }
+    case HostText: {
+      break;
+    }
+    case HostPortal: {
+      // TODO: Consider what should happen to Portals. For now we exclude them.
+      break;
+    }
+    case OffscreenComponent: {
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        if (!isHidden) {
+          restoreEnterOrExitViewTransitions(finishedWork);
+        } else if (current !== null && current.memoizedState === null) {
+          // Was previously mounted as visible but is now hidden.
+          restoreEnterOrExitViewTransitions(current);
+        }
+      }
+      break;
+    }
+    case ViewTransitionComponent:
+      const viewTransitionState: ViewTransitionState = finishedWork.stateNode;
+      viewTransitionState.clones = null; // Reset
+      recursivelyRestoreViewTransitions(finishedWork);
+      break;
+    default: {
+      recursivelyRestoreViewTransitions(finishedWork);
+      break;
+    }
+  }
 }
 
 // Revert transition names and start/adjust animations on the started View Transition.
 export function startGestureAnimations(
   root: FiberRoot,
   finishedWork: Fiber,
 ): void {
-  // TODO
+  restoreViewTransitionsOnFiber(finishedWork);
   restoreRootViewTransitionName(root.containerInfo);
 }

filename: packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
patch: @@ -9,7 +9,7 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {ViewTransitionInstance} from './ReactFiberConfig';
+import type {ViewTransitionInstance, Instance} from './ReactFiberConfig';
 
 import {
   getWorkInProgressRoot,
@@ -45,6 +45,7 @@ export type ViewTransitionProps = {
 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
+  clones: null | Array<Instance>, // a temporary state during the apply gesture phase if we cloned this boundary
   ref: null | ViewTransitionInstance, // the current ref instance. This can change through the lifetime of the instance.
 };