Skip to content

Don't consider Portals animating unless they're wrapped in a ViewTransition #33191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 14, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ import {
TransitionRoot,
TransitionTracingMarker,
} from './ReactFiberTracingMarkerComponent';
import {getViewTransitionClassName} from './ReactFiberViewTransitionComponent';
import {
commitHookLayoutEffects,
commitHookLayoutUnmountEffects,
Expand Down Expand Up @@ -303,6 +304,7 @@ export let shouldFireAfterActiveInstanceBlur: boolean = false;
// Used during the commit phase to track whether a parent ViewTransition component
// might have been affected by any mutations / relayouts below.
let viewTransitionContextChanged: boolean = false;
let inUpdateViewTransition: boolean = false;
let rootViewTransitionAffected: boolean = false;

function isHydratingParent(current: Fiber, finishedWork: Fiber): boolean {
Expand Down Expand Up @@ -1937,6 +1939,7 @@ export function commitMutationEffects(
inProgressRoot = root;

rootViewTransitionAffected = false;
inUpdateViewTransition = false;

resetComponentEffectTimers();

Expand Down Expand Up @@ -2299,7 +2302,7 @@ function commitMutationEffectsOnFiber(
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork, lanes);
}
if (viewTransitionMutationContext) {
if (viewTransitionMutationContext && inUpdateViewTransition) {
// A Portal doesn't necessarily exist within the context of this subtree.
// Ideally we would track which React ViewTransition component nests the container
// but that's costly. Instead, we treat each Portal as if it's a new React root.
Expand Down Expand Up @@ -2534,11 +2537,16 @@ function commitMutationEffectsOnFiber(
}
}
const prevMutationContext = pushMutationContext();
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork, lanes);
const prevUpdate = inUpdateViewTransition;
const isViewTransitionEligible =
enableViewTransition &&
includesOnlyViewTransitionEligibleLanes(lanes);
const props = finishedWork.memoizedProps;
inUpdateViewTransition =
isViewTransitionEligible &&
getViewTransitionClassName(props.default, props.update) !== 'none';
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork, lanes);
if (isViewTransitionEligible) {
if (current === null) {
// This is a new mount. We should have handled this as part of the
Expand All @@ -2551,6 +2559,7 @@ function commitMutationEffectsOnFiber(
finishedWork.flags |= Update;
}
}
inUpdateViewTransition = prevUpdate;
popMutationContext(prevMutationContext);
break;
}
Expand Down Expand Up @@ -2763,6 +2772,8 @@ function commitAfterMutationEffectsOnFiber(
// Ideally we would track which React ViewTransition component nests the container
// but that's costly. Instead, we treat each Portal as if it's a new React root.
// Therefore any leaked resize of a child could affect the root so the root should animate.
// We only do this if the Portal is inside a ViewTransition and it is not disabled
// with update="none". Otherwise the Portal is considered not animating.
rootViewTransitionAffected = true;
}
viewTransitionContextChanged = prevContextChanged;
Expand Down
Loading