Skip to content
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