Skip to content

[Perf Tracks]: Always log effect that spawned blocking update #34648

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.

Sign up for GitHub

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
Sep 30, 2025
+53 −10
Merged

[Perf Tracks]: Always log effect that spawned blocking update #34648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
43 changes: 33 additions & 10 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,13 @@ import {
popComponentEffectDuration,
pushComponentEffectErrors,
popComponentEffectErrors,
pushComponentEffectDidSpawnUpdate,
popComponentEffectDidSpawnUpdate,
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
componentEffectSpawnedUpdate,
} from './ReactProfilerTimer';
import {
logComponentRender,
Expand Down Expand Up @@ -595,6 +598,7 @@ function commitLayoutEffectOnFiber(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
// When updating this function, also update reappearLayoutEffects, which does
// most of the same things when an offscreen tree goes from hidden -> visible.
const flags = finishedWork.flags;
Expand Down Expand Up @@ -876,7 +880,7 @@ function commitLayoutEffectOnFiber(
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0
) {
if (componentEffectDuration > 0.05) {
if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
logComponentEffect(
finishedWork,
componentEffectStartTime,
Expand Down Expand Up @@ -909,6 +913,7 @@ function commitLayoutEffectOnFiber(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
}

function abortRootTransitions(
Expand Down Expand Up @@ -1430,6 +1435,7 @@ function commitDeletionEffectsOnFiber(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();

// The cases in this outer switch modify the stack before they traverse
// into their subtree. There are simpler cases in the inner switch
Expand Down Expand Up @@ -1750,7 +1756,7 @@ function commitDeletionEffectsOnFiber(
(deletedFiber.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
deletedFiber,
Expand All @@ -1764,6 +1770,7 @@ function commitDeletionEffectsOnFiber(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
}

function commitSuspenseCallback(finishedWork: Fiber) {
Expand Down Expand Up @@ -1987,6 +1994,7 @@ function commitMutationEffectsOnFiber(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
const current = finishedWork.alternate;
const flags = finishedWork.flags;

Expand Down Expand Up @@ -2611,7 +2619,7 @@ function commitMutationEffectsOnFiber(
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0
) {
if (componentEffectDuration > 0.05) {
if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
logComponentEffect(
finishedWork,
componentEffectStartTime,
Expand Down Expand Up @@ -2644,6 +2652,7 @@ function commitMutationEffectsOnFiber(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
}

function commitReconciliationEffects(
Expand Down Expand Up @@ -2900,6 +2909,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -2990,7 +3000,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
(finishedWork.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
finishedWork,
Expand All @@ -3004,6 +3014,7 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
}

function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
Expand All @@ -3027,6 +3038,7 @@ export function reappearLayoutEffects(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
// Turn on layout effects in a tree that previously disappeared.
const flags = finishedWork.flags;
switch (finishedWork.tag) {
Expand Down Expand Up @@ -3224,7 +3236,7 @@ export function reappearLayoutEffects(
(finishedWork.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
finishedWork,
Expand All @@ -3238,6 +3250,7 @@ export function reappearLayoutEffects(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
}

function recursivelyTraverseReappearLayoutEffects(
Expand Down Expand Up @@ -3489,6 +3502,7 @@ function commitPassiveMountOnFiber(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
const prevDeepEquality = pushDeepEquality();

const isViewTransitionEligible = enableViewTransition
Expand Down Expand Up @@ -4060,7 +4074,7 @@ function commitPassiveMountOnFiber(
}
}
if (componentEffectStartTime >= 0 && componentEffectEndTime >= 0) {
if (componentEffectDuration > 0.05) {
if (componentEffectSpawnedUpdate || componentEffectDuration > 0.05) {
logComponentEffect(
finishedWork,
componentEffectStartTime,
Expand All @@ -4082,6 +4096,7 @@ function commitPassiveMountOnFiber(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
popDeepEquality(prevDeepEquality);
}

Expand Down Expand Up @@ -4144,6 +4159,7 @@ export function reconnectPassiveEffects(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
const prevDeepEquality = pushDeepEquality();

// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
Expand Down Expand Up @@ -4334,7 +4350,7 @@ export function reconnectPassiveEffects(
(finishedWork.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
finishedWork,
Expand All @@ -4348,6 +4364,7 @@ export function reconnectPassiveEffects(
popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectErrors(prevEffectErrors);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
popDeepEquality(prevDeepEquality);
}

Expand Down Expand Up @@ -4737,6 +4754,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -4833,7 +4851,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
(finishedWork.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
finishedWork,
Expand All @@ -4846,6 +4864,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {

popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
popComponentEffectErrors(prevEffectErrors);
}

Expand Down Expand Up @@ -4903,6 +4922,7 @@ export function disconnectPassiveEffect(finishedWork: Fiber): void {
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();

switch (finishedWork.tag) {
case FunctionComponent:
Expand Down Expand Up @@ -4942,7 +4962,7 @@ export function disconnectPassiveEffect(finishedWork: Fiber): void {
(finishedWork.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
finishedWork,
Expand All @@ -4955,6 +4975,7 @@ export function disconnectPassiveEffect(finishedWork: Fiber): void {

popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
popComponentEffectErrors(prevEffectErrors);
}

Expand Down Expand Up @@ -5016,6 +5037,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
const prevEffectStart = pushComponentEffectStart();
const prevEffectDuration = pushComponentEffectDuration();
const prevEffectErrors = pushComponentEffectErrors();
const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
switch (current.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -5135,7 +5157,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
(current.mode & ProfileMode) !== NoMode &&
componentEffectStartTime >= 0 &&
componentEffectEndTime >= 0 &&
componentEffectDuration > 0.05
(componentEffectSpawnedUpdate || componentEffectDuration > 0.05)
) {
logComponentEffect(
current,
Expand All @@ -5148,6 +5170,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(

popComponentEffectStart(prevEffectStart);
popComponentEffectDuration(prevEffectDuration);
popComponentEffectDidSpawnUpdate(prevEffectDidSpawnUpdate);
popComponentEffectErrors(prevEffectErrors);
}

Expand Down
20 changes: 20 additions & 0 deletions packages/react-reconciler/src/ReactProfilerTimer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export let componentEffectDuration: number = -0;
export let componentEffectStartTime: number = -1.1;
export let componentEffectEndTime: number = -1.1;
export let componentEffectErrors: null | Array<CapturedValue<mixed>> = null;
export let componentEffectSpawnedUpdate: boolean = false;

export let blockingClampTime: number = -0;
export let blockingUpdateTime: number = -1.1; // First sync setState scheduled.
Expand Down Expand Up @@ -153,6 +154,7 @@ export function startUpdateTimerByLane(
blockingUpdateComponentName = getComponentNameFromFiber(fiber);
}
if (isAlreadyRendering()) {
componentEffectSpawnedUpdate = true;
blockingUpdateType = SPAWNED_UPDATE;
}
const newEventTime = resolveEventTimeStamp();
Expand Down Expand Up @@ -495,6 +497,24 @@ export function popComponentEffectErrors(
componentEffectErrors = prevErrors;
}

export function pushComponentEffectDidSpawnUpdate(): boolean {
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
return false;
}

const prev = componentEffectSpawnedUpdate;
componentEffectSpawnedUpdate = false; // Reset.
return prev;
}

export function popComponentEffectDidSpawnUpdate(previousValue: boolean): void {
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
return;
}

componentEffectSpawnedUpdate = previousValue;
}

/**
* Tracks whether the current update was a nested/cascading update (scheduled from a layout effect).
*
Expand Down
Loading