Skip to content

Commit b8a6e2b

Browse files
committed
Move commitEnterViewTransitions to the after mutation phase
That way we'll be able to exclude them if they are not within the viewport. To do this we need a different mechanisms to detect insertions instead of Placement effect which was already wrong since it includes moves.
1 parent e57e6f2 commit b8a6e2b

File tree

1 file changed

+16
-26
lines changed

1 file changed

+16
-26
lines changed

packages/react-reconciler/src/ReactFiberCommitWork.js

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2723,15 +2723,6 @@ function commitMutationEffectsOnFiber(
27232723
recursivelyTraverseDisappearLayoutEffects(finishedWork);
27242724
}
27252725
}
2726-
} else {
2727-
if (wasHidden) {
2728-
const isViewTransitionEligible =
2729-
enableViewTransition &&
2730-
includesOnlyViewTransitionEligibleLanes(lanes);
2731-
if (isViewTransitionEligible) {
2732-
commitEnterViewTransitions(finishedWork);
2733-
}
2734-
}
27352726
}
27362727

27372728
// Offscreen with manual mode manages visibility manually.
@@ -2855,16 +2846,6 @@ function commitReconciliationEffects(
28552846
// before the effects on this fiber have fired.
28562847
const flags = finishedWork.flags;
28572848
if (flags & Placement) {
2858-
const isViewTransitionEligible =
2859-
enableViewTransition &&
2860-
includesOnlyViewTransitionEligibleLanes(committedLanes);
2861-
if (isViewTransitionEligible) {
2862-
// The first ViewTransition inside the Placement runs an enter transition
2863-
// but other nested ones don't.
2864-
// TODO: This shares the same traveral as commitHostPlacement below so it
2865-
// could be optimized to share the same pass.
2866-
commitEnterViewTransitions(finishedWork);
2867-
}
28682849
commitHostPlacement(finishedWork);
28692850
// Clear the "placement" from effect tag so that we know that this is
28702851
// inserted, before any life-cycles like componentDidMount gets called.
@@ -2937,6 +2918,19 @@ function commitAfterMutationEffectsOnFiber(
29372918
root: FiberRoot,
29382919
lanes: Lanes,
29392920
) {
2921+
const current = finishedWork.alternate;
2922+
if (current === null) {
2923+
// This is a newly inserted subtree. We can't use Placement flags to detect
2924+
// this since they get removed in the mutation phase. Usually it's not enough
2925+
// to just check current because that can also happen deeper in the same tree.
2926+
// However, since we don't need to visit newly inserted subtrees in AfterMutation
2927+
// we can just bail after we're done with the first one.
2928+
// The first ViewTransition inside a newly mounted tree runs an enter transition
2929+
// but other nested ones don't unless they have a named pair.
2930+
commitEnterViewTransitions(finishedWork);
2931+
return;
2932+
}
2933+
29402934
switch (finishedWork.tag) {
29412935
case HostRoot: {
29422936
viewTransitionContextChanged = false;
@@ -2967,7 +2961,6 @@ function commitAfterMutationEffectsOnFiber(
29672961
break;
29682962
}
29692963
case OffscreenComponent: {
2970-
const current = finishedWork.alternate;
29712964
const isModernRoot =
29722965
disableLegacyMode || (finishedWork.mode & ConcurrentMode) !== NoMode;
29732966
if (isModernRoot) {
@@ -2976,8 +2969,9 @@ function commitAfterMutationEffectsOnFiber(
29762969
// The Offscreen tree is hidden. Skip over its after mutation effects.
29772970
} else {
29782971
// The Offscreen tree is visible.
2979-
const wasHidden = current !== null && current.memoizedState !== null;
2972+
const wasHidden = current.memoizedState !== null;
29802973
if (wasHidden) {
2974+
commitEnterViewTransitions(finishedWork);
29812975
// If it was previous hidden then the children are treated as enter
29822976
// not updates so we don't need to visit these children.
29832977
} else {
@@ -2990,11 +2984,7 @@ function commitAfterMutationEffectsOnFiber(
29902984
break;
29912985
}
29922986
case ViewTransitionComponent: {
2993-
const current = finishedWork.alternate;
2994-
if (current === null) {
2995-
// This is a new mount. We should have handled this as part of the
2996-
// Placement effect or it is deeper inside a entering transition.
2997-
} else if (
2987+
if (
29982988
(finishedWork.subtreeFlags &
29992989
(Placement | Update | ChildDeletion | ContentReset | Visibility)) !==
30002990
NoFlags

0 commit comments

Comments
 (0)