diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index b80635423ab5f..e1d75149b2425 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -221,12 +221,19 @@ export function logCommitPhase(startTime: number, endTime: number): void { } } -export function logPaintYieldPhase(startTime: number, endTime: number): void { +export function logPaintYieldPhase( + startTime: number, + endTime: number, + delayedUntilPaint: boolean, +): void { if (supportsUserTiming) { reusableLaneDevToolDetails.color = 'secondary-light'; reusableLaneOptions.start = startTime; reusableLaneOptions.end = endTime; - performance.measure('Waiting for Paint', reusableLaneOptions); + performance.measure( + delayedUntilPaint ? 'Waiting for Paint' : '', + reusableLaneOptions, + ); } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index bffedf498bc28..6d2ec2d0c8e61 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -3550,7 +3550,11 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) { let passiveEffectStartTime = 0; if (enableProfilerTimer && enableComponentPerformanceTrack) { passiveEffectStartTime = now(); - logPaintYieldPhase(commitEndTime, passiveEffectStartTime); + logPaintYieldPhase( + commitEndTime, + passiveEffectStartTime, + !!wasDelayedCommit, + ); } if (enableSchedulingProfiler) { @@ -3587,9 +3591,7 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) { if (enableProfilerTimer && enableComponentPerformanceTrack) { const passiveEffectsEndTime = now(); - if (wasDelayedCommit) { - logPassiveCommitPhase(passiveEffectStartTime, passiveEffectsEndTime); - } + logPassiveCommitPhase(passiveEffectStartTime, passiveEffectsEndTime); finalizeRender(lanes, passiveEffectsEndTime); }