Add the suffix to cancelled view transition names

[everettbu]

Mirror of facebook/react#35485
Original author: sebmarkbage

---

When a View Transition might not need to update we add it to a queue. If the parent are able to be reverted, we then cancel the already started view transitions. We do this by adding an animation that hides the "old" state and remove the view transition name from the old state.

There was a bug where if you have more than one child in a <ViewTransition> we didn't add the right suffix to the name we added in the queue so it wasn't adding an animation that hides the old state. The effect was that it playing an exit animation instead of being cancelled.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes a bug in the view transition cancellation logic when a <ViewTransition> component has multiple child host instances.

Problem

When a ViewTransition has multiple host instances (e.g., multiple divs), each instance gets a unique view-transition-name by appending a suffix (_0, _1, etc.) to the base name. During the cancellation process:

• The names were correctly applied with suffixes in the snapshot phase via applyViewTransitionName
• However, when adding to the viewTransitionCancelableChildren queue, the code was storing the base oldName without the suffix
• Later, when cancelViewTransitionName was called, it couldn't properly target the correct CSS pseudo-element (e.g., ::view-transition-group(name_1))
• This caused the old state to play an exit animation instead of being properly hidden/cancelled

Solution

The fix adds the same suffix logic to the oldName when pushing to the cancelable children queue (lines 714-718), ensuring consistency with:

1. applyViewTransitionToHostInstancesRecursive (lines 160-164)
2. The same function's newName application (lines 695-699)

This ensures the cancellation animation correctly targets the suffixed pseudo-element selector.

Code Quality

• The fix follows the established pattern used consistently throughout the file
• Uses the same ternary operator structure and comment style
• Maintains type safety with Flow
• No edge case issues identified

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - it's a targeted bug fix that properly implements the established naming pattern.
• Score reflects that this is a straightforward bug fix with clear correctness: (1) The change follows the exact same pattern used consistently in two other locations within the same file, (2) The fix directly addresses the stated bug by ensuring name consistency between the application and cancellation phases, (3) Thorough code exploration found no edge cases or related issues, (4) The change is minimal, well-commented, and maintains type safety, (5) The logic has been traced through the entire flow from application to consumption of the cancelable children queue.
• No files require special attention - the single changed file contains a simple, well-scoped bug fix.

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-reconciler/src/ReactFiberCommitViewTransitions.js	5/5	Bug fix that correctly adds suffix to cancelled view transition names for multiple host instances. The fix ensures name consistency between application and cancellation phases, following the same pattern used elsewhere in the file.

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.