Skip to content

Commit ef1be47

Browse files
sebmarkbagesebmarkbage
committed
Track componentEffectDuration on the stack so that we can restore it when we log it
1 parent 8fc8107 commit ef1be47

3 files changed

Lines changed: 91 additions & 27 deletions

File tree

‎fixtures/view-transition/src/components/Page.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,18 @@ const b = (
3535
);
3636

3737
function Component() {
38+
useLayoutEffect(() => {
39+
return function slowLayoutUnmount() {
40+
let e = performance.now() + 100;
41+
while (performance.now() < e);
42+
};
43+
}, []);
44+
useEffect(() => {
45+
return function slowPassiveUnmount() {
46+
let e = performance.now() + 100;
47+
while (performance.now() < e);
48+
};
49+
}, []);
3850
return (
3951
<ViewTransition
4052
default={
@@ -171,6 +183,7 @@ export default function Page({url, navigate}) {
171183
</ViewTransition>
172184
)}
173185
<Activity mode={show ? 'visible' : 'hidden'}>
186+
<Component />
174187
<ViewTransition>
175188
<div>!!</div>
176189
</ViewTransition>

‎packages/react-reconciler/src/ReactFiberCommitWork.js‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ import {
119119
resetComponentEffectTimers,
120120
pushComponentEffectStart,
121121
popComponentEffectStart,
122+
pushComponentEffectDuration,
123+
popComponentEffectDuration,
122124
pushComponentEffectErrors,
123125
popComponentEffectErrors,
124126
componentEffectStartTime,
@@ -543,6 +545,7 @@ function commitLayoutEffectOnFiber(
543545
committedLanes: Lanes,
544546
): void {
545547
const prevEffectStart = pushComponentEffectStart();
548+
const prevEffectDuration = pushComponentEffectDuration();
546549
const prevEffectErrors = pushComponentEffectErrors();
547550
// When updating this function, also update reappearLayoutEffects, which does
548551
// most of the same things when an offscreen tree goes from hidden -> visible.
@@ -581,7 +584,7 @@ function commitLayoutEffectOnFiber(
581584
break;
582585
}
583586
case HostRoot: {
584-
const prevEffectDuration = pushNestedEffectDurations();
587+
const prevProfilerEffectDuration = pushNestedEffectDurations();
585588
recursivelyTraverseLayoutEffects(
586589
finishedRoot,
587590
finishedWork,
@@ -591,8 +594,9 @@ function commitLayoutEffectOnFiber(
591594
commitRootCallbacks(finishedWork);
592595
}
593596
if (enableProfilerTimer && enableProfilerCommitHooks) {
594-
finishedRoot.effectDuration +=
595-
popNestedEffectDurations(prevEffectDuration);
597+
finishedRoot.effectDuration += popNestedEffectDurations(
598+
prevProfilerEffectDuration,
599+
);
596600
}
597601
break;
598602
}
@@ -638,7 +642,7 @@ function commitLayoutEffectOnFiber(
638642
// TODO: Should this fire inside an offscreen tree? Or should it wait to
639643
// fire when the tree becomes visible again.
640644
if (flags & Update) {
641-
const prevEffectDuration = pushNestedEffectDurations();
645+
const prevProfilerEffectDuration = pushNestedEffectDurations();
642646

643647
recursivelyTraverseLayoutEffects(
644648
finishedRoot,
@@ -651,8 +655,9 @@ function commitLayoutEffectOnFiber(
651655
if (enableProfilerTimer && enableProfilerCommitHooks) {
652656
// Propagate layout effect durations to the next nearest Profiler ancestor.
653657
// Do not reset these values until the next render so DevTools has a chance to read them first.
654-
profilerInstance.effectDuration +=
655-
bubbleNestedEffectDurations(prevEffectDuration);
658+
profilerInstance.effectDuration += bubbleNestedEffectDurations(
659+
prevProfilerEffectDuration,
660+
);
656661
}
657662

658663
commitProfilerUpdate(
@@ -804,6 +809,7 @@ function commitLayoutEffectOnFiber(
804809
}
805810

806811
popComponentEffectStart(prevEffectStart);
812+
popComponentEffectDuration(prevEffectDuration);
807813
popComponentEffectErrors(prevEffectErrors);
808814
}
809815

@@ -1301,6 +1307,7 @@ function commitDeletionEffectsOnFiber(
13011307
onCommitUnmount(deletedFiber);
13021308

13031309
const prevEffectStart = pushComponentEffectStart();
1310+
const prevEffectDuration = pushComponentEffectDuration();
13041311
const prevEffectErrors = pushComponentEffectErrors();
13051312

13061313
// The cases in this outer switch modify the stack before they traverse
@@ -1632,6 +1639,7 @@ function commitDeletionEffectsOnFiber(
16321639
}
16331640

16341641
popComponentEffectStart(prevEffectStart);
1642+
popComponentEffectDuration(prevEffectDuration);
16351643
popComponentEffectErrors(prevEffectErrors);
16361644
}
16371645

@@ -1821,6 +1829,7 @@ function commitMutationEffectsOnFiber(
18211829
lanes: Lanes,
18221830
) {
18231831
const prevEffectStart = pushComponentEffectStart();
1832+
const prevEffectDuration = pushComponentEffectDuration();
18241833
const prevEffectErrors = pushComponentEffectErrors();
18251834
const current = finishedWork.alternate;
18261835
const flags = finishedWork.flags;
@@ -2044,7 +2053,7 @@ function commitMutationEffectsOnFiber(
20442053
break;
20452054
}
20462055
case HostRoot: {
2047-
const prevEffectDuration = pushNestedEffectDurations();
2056+
const prevProfilerEffectDuration = pushNestedEffectDurations();
20482057

20492058
if (supportsResources) {
20502059
prepareToCommitHoistables();
@@ -2090,7 +2099,9 @@ function commitMutationEffectsOnFiber(
20902099
}
20912100

20922101
if (enableProfilerTimer && enableProfilerCommitHooks) {
2093-
root.effectDuration += popNestedEffectDurations(prevEffectDuration);
2102+
root.effectDuration += popNestedEffectDurations(
2103+
prevProfilerEffectDuration,
2104+
);
20942105
}
20952106

20962107
break;
@@ -2130,7 +2141,7 @@ function commitMutationEffectsOnFiber(
21302141
break;
21312142
}
21322143
case Profiler: {
2133-
const prevEffectDuration = pushNestedEffectDurations();
2144+
const prevProfilerEffectDuration = pushNestedEffectDurations();
21342145

21352146
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
21362147
commitReconciliationEffects(finishedWork, lanes);
@@ -2139,8 +2150,9 @@ function commitMutationEffectsOnFiber(
21392150
const profilerInstance = finishedWork.stateNode;
21402151
// Propagate layout effect durations to the next nearest Profiler ancestor.
21412152
// Do not reset these values until the next render so DevTools has a chance to read them first.
2142-
profilerInstance.effectDuration +=
2143-
bubbleNestedEffectDurations(prevEffectDuration);
2153+
profilerInstance.effectDuration += bubbleNestedEffectDurations(
2154+
prevProfilerEffectDuration,
2155+
);
21442156
}
21452157
break;
21462158
}
@@ -2372,6 +2384,7 @@ function commitMutationEffectsOnFiber(
23722384
}
23732385

23742386
popComponentEffectStart(prevEffectStart);
2387+
popComponentEffectDuration(prevEffectDuration);
23752388
popComponentEffectErrors(prevEffectErrors);
23762389
}
23772390

@@ -2623,6 +2636,7 @@ function recursivelyTraverseLayoutEffects(
26232636

26242637
export function disappearLayoutEffects(finishedWork: Fiber) {
26252638
const prevEffectStart = pushComponentEffectStart();
2639+
const prevEffectDuration = pushComponentEffectDuration();
26262640
const prevEffectErrors = pushComponentEffectErrors();
26272641
switch (finishedWork.tag) {
26282642
case FunctionComponent:
@@ -2726,6 +2740,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
27262740
}
27272741

27282742
popComponentEffectStart(prevEffectStart);
2743+
popComponentEffectDuration(prevEffectDuration);
27292744
popComponentEffectErrors(prevEffectErrors);
27302745
}
27312746

@@ -2748,6 +2763,7 @@ export function reappearLayoutEffects(
27482763
includeWorkInProgressEffects: boolean,
27492764
) {
27502765
const prevEffectStart = pushComponentEffectStart();
2766+
const prevEffectDuration = pushComponentEffectDuration();
27512767
const prevEffectErrors = pushComponentEffectErrors();
27522768
// Turn on layout effects in a tree that previously disappeared.
27532769
const flags = finishedWork.flags;
@@ -2831,7 +2847,7 @@ export function reappearLayoutEffects(
28312847
case Profiler: {
28322848
// TODO: Figure out how Profiler updates should work with Offscreen
28332849
if (includeWorkInProgressEffects && flags & Update) {
2834-
const prevEffectDuration = pushNestedEffectDurations();
2850+
const prevProfilerEffectDuration = pushNestedEffectDurations();
28352851

28362852
recursivelyTraverseReappearLayoutEffects(
28372853
finishedRoot,
@@ -2844,8 +2860,9 @@ export function reappearLayoutEffects(
28442860
if (enableProfilerTimer && enableProfilerCommitHooks) {
28452861
// Propagate layout effect durations to the next nearest Profiler ancestor.
28462862
// Do not reset these values until the next render so DevTools has a chance to read them first.
2847-
profilerInstance.effectDuration +=
2848-
bubbleNestedEffectDurations(prevEffectDuration);
2863+
profilerInstance.effectDuration += bubbleNestedEffectDurations(
2864+
prevProfilerEffectDuration,
2865+
);
28492866
}
28502867

28512868
commitProfilerUpdate(
@@ -2944,6 +2961,7 @@ export function reappearLayoutEffects(
29442961
}
29452962

29462963
popComponentEffectStart(prevEffectStart);
2964+
popComponentEffectDuration(prevEffectDuration);
29472965
popComponentEffectErrors(prevEffectErrors);
29482966
}
29492967

@@ -3194,6 +3212,7 @@ function commitPassiveMountOnFiber(
31943212
endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
31953213
): void {
31963214
const prevEffectStart = pushComponentEffectStart();
3215+
const prevEffectDuration = pushComponentEffectDuration();
31973216
const prevEffectErrors = pushComponentEffectErrors();
31983217

31993218
const isViewTransitionEligible = enableViewTransition
@@ -3297,7 +3316,7 @@ function commitPassiveMountOnFiber(
32973316
break;
32983317
}
32993318
case HostRoot: {
3300-
const prevEffectDuration = pushNestedEffectDurations();
3319+
const prevProfilerEffectDuration = pushNestedEffectDurations();
33013320

33023321
const wasInHydratedSubtree = inHydratedSubtree;
33033322
if (enableProfilerTimer && enableComponentPerformanceTrack) {
@@ -3374,15 +3393,16 @@ function commitPassiveMountOnFiber(
33743393
}
33753394
}
33763395
if (enableProfilerTimer && enableProfilerCommitHooks) {
3377-
finishedRoot.passiveEffectDuration +=
3378-
popNestedEffectDurations(prevEffectDuration);
3396+
finishedRoot.passiveEffectDuration += popNestedEffectDurations(
3397+
prevProfilerEffectDuration,
3398+
);
33793399
}
33803400
break;
33813401
}
33823402
case Profiler: {
33833403
// Only Profilers with work in their subtree will have a Passive effect scheduled.
33843404
if (flags & Passive) {
3385-
const prevEffectDuration = pushNestedEffectDurations();
3405+
const prevProfilerEffectDuration = pushNestedEffectDurations();
33863406

33873407
recursivelyTraversePassiveMountEffects(
33883408
finishedRoot,
@@ -3397,8 +3417,9 @@ function commitPassiveMountOnFiber(
33973417
if (enableProfilerTimer && enableProfilerCommitHooks) {
33983418
// Bubble times to the next nearest ancestor Profiler.
33993419
// After we process that Profiler, we'll bubble further up.
3400-
profilerInstance.passiveEffectDuration +=
3401-
bubbleNestedEffectDurations(prevEffectDuration);
3420+
profilerInstance.passiveEffectDuration += bubbleNestedEffectDurations(
3421+
prevProfilerEffectDuration,
3422+
);
34023423
}
34033424

34043425
commitProfilerPostCommit(
@@ -3682,6 +3703,7 @@ function commitPassiveMountOnFiber(
36823703
}
36833704

36843705
popComponentEffectStart(prevEffectStart);
3706+
popComponentEffectDuration(prevEffectDuration);
36853707
popComponentEffectErrors(prevEffectErrors);
36863708
}
36873709

@@ -3742,6 +3764,7 @@ export function reconnectPassiveEffects(
37423764
endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
37433765
) {
37443766
const prevEffectStart = pushComponentEffectStart();
3767+
const prevEffectDuration = pushComponentEffectDuration();
37453768
const prevEffectErrors = pushComponentEffectErrors();
37463769
// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
37473770
// render time. We do this after the fact in the passive effect to avoid the overhead of this
@@ -3941,6 +3964,7 @@ export function reconnectPassiveEffects(
39413964
}
39423965

39433966
popComponentEffectStart(prevEffectStart);
3967+
popComponentEffectDuration(prevEffectDuration);
39443968
popComponentEffectErrors(prevEffectErrors);
39453969
}
39463970

@@ -4243,6 +4267,7 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
42434267

42444268
function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
42454269
const prevEffectStart = pushComponentEffectStart();
4270+
const prevEffectDuration = pushComponentEffectDuration();
42464271
const prevEffectErrors = pushComponentEffectErrors();
42474272
switch (finishedWork.tag) {
42484273
case FunctionComponent:
@@ -4259,26 +4284,28 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
42594284
break;
42604285
}
42614286
case HostRoot: {
4262-
const prevEffectDuration = pushNestedEffectDurations();
4287+
const prevProfilerEffectDuration = pushNestedEffectDurations();
42634288
recursivelyTraversePassiveUnmountEffects(finishedWork);
42644289
if (enableProfilerTimer && enableProfilerCommitHooks) {
42654290
const finishedRoot: FiberRoot = finishedWork.stateNode;
4266-
finishedRoot.passiveEffectDuration +=
4267-
popNestedEffectDurations(prevEffectDuration);
4291+
finishedRoot.passiveEffectDuration += popNestedEffectDurations(
4292+
prevProfilerEffectDuration,
4293+
);
42684294
}
42694295
break;
42704296
}
42714297
case Profiler: {
4272-
const prevEffectDuration = pushNestedEffectDurations();
4298+
const prevProfilerEffectDuration = pushNestedEffectDurations();
42734299

42744300
recursivelyTraversePassiveUnmountEffects(finishedWork);
42754301

42764302
if (enableProfilerTimer && enableProfilerCommitHooks) {
42774303
const profilerInstance = finishedWork.stateNode;
42784304
// Propagate layout effect durations to the next nearest Profiler ancestor.
42794305
// Do not reset these values until the next render so DevTools has a chance to read them first.
4280-
profilerInstance.passiveEffectDuration +=
4281-
bubbleNestedEffectDurations(prevEffectDuration);
4306+
profilerInstance.passiveEffectDuration += bubbleNestedEffectDurations(
4307+
prevProfilerEffectDuration,
4308+
);
42824309
}
42834310
break;
42844311
}
@@ -4333,6 +4360,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
43334360
}
43344361

43354362
popComponentEffectStart(prevEffectStart);
4363+
popComponentEffectDuration(prevEffectDuration);
43364364
popComponentEffectErrors(prevEffectErrors);
43374365
}
43384366

@@ -4366,6 +4394,7 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
43664394

43674395
export function disconnectPassiveEffect(finishedWork: Fiber): void {
43684396
const prevEffectStart = pushComponentEffectStart();
4397+
const prevEffectDuration = pushComponentEffectDuration();
43694398
const prevEffectErrors = pushComponentEffectErrors();
43704399

43714400
switch (finishedWork.tag) {
@@ -4418,6 +4447,7 @@ export function disconnectPassiveEffect(finishedWork: Fiber): void {
44184447
}
44194448

44204449
popComponentEffectStart(prevEffectStart);
4450+
popComponentEffectDuration(prevEffectDuration);
44214451
popComponentEffectErrors(prevEffectErrors);
44224452
}
44234453

@@ -4477,6 +4507,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
44774507
nearestMountedAncestor: Fiber | null,
44784508
): void {
44794509
const prevEffectStart = pushComponentEffectStart();
4510+
const prevEffectDuration = pushComponentEffectDuration();
44804511
const prevEffectErrors = pushComponentEffectErrors();
44814512
switch (current.tag) {
44824513
case FunctionComponent:
@@ -4609,6 +4640,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
46094640
}
46104641

46114642
popComponentEffectStart(prevEffectStart);
4643+
popComponentEffectDuration(prevEffectDuration);
46124644
popComponentEffectErrors(prevEffectErrors);
46134645
}
46144646

0 commit comments

Comments
 (0)