@samitouri / QOS-React / commits / b2f6365745

Minor Tweak to Performance Track (#32808)

Rename "Suspended" commit to "Suspended on CSS" since that's the only reason for this particular branch. This will not hold true because with suspended images and with view transitions those can also be the reason. So in the future we need to add those. Only log "Blocked" in the components track if we yield for 3ms or longer. It's common to have like 1-2ms yield times for various reasons going on which is not worth the noise to consider "blocking". Rename "Blocked" to "Update" in the Blocking/Transition tracks. This is when a setState happens and with stack traces it's where you should look for the stack trace of the setState. So we want to indicate that this is the "Update". I only added the "Blocked" part if we're blocked for more than 5ms before we can start rendering - indicating that some other track was working at the same time and preventing us from rendering.

Sebastian Markbåge committed Apr 2, 2025 at 17:01 UTC b2f6365745416be4d7dad7799a2cfbfbbf425389

1 file changed +17 -4

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

+17 -4

@@ -284,7 +284,7 @@ export function logComponentEffect(

284 export function logYieldTime(startTime: number, endTime: number): void {

285 if (supportsUserTiming) {

286 const yieldDuration = endTime - startTime;

287 - if (yieldDuration < 1) {

287 + if (yieldDuration < 3) {

288 // Skip sub-millisecond yields. This happens all the time and is not interesting.

289 return;

290 }

@@ -299,6 +299,10 @@ export function logYieldTime(startTime: number, endTime: number): void {

299 : 'error';

300 reusableComponentOptions.start = startTime;

301 reusableComponentOptions.end = endTime;

302 + // This get logged in the components track if we don't commit which leaves them

303 + // hanging by themselves without context. It's a useful indicator for why something

304 + // might be starving this render though.

305 + // TODO: Considering adding these to a queue and only logging them if we commit.

306 performance.measure('Blocked', reusableComponentOptions);

307 }

308 }

@@ -365,7 +369,11 @@ export function logBlockingStart(

369 reusableLaneOptions.start = updateTime;

370 reusableLaneOptions.end = renderStartTime;

371 performance.measure(

368 - isSpawnedUpdate ? 'Cascade' : 'Blocked',

372 + isSpawnedUpdate

373 + ? 'Cascading Update'

374 + : renderStartTime - updateTime > 5

375 + ? 'Update Blocked'

376 + : 'Update',

377 reusableLaneOptions,

378 );

379 }

@@ -411,7 +419,10 @@ export function logTransitionStart(

419 reusableLaneDevToolDetails.color = 'primary-light';

420 reusableLaneOptions.start = updateTime;

421 reusableLaneOptions.end = renderStartTime;

414 - performance.measure('Blocked', reusableLaneOptions);

422 + performance.measure(

423 + renderStartTime - updateTime > 5 ? 'Update Blocked' : 'Update',

424 + reusableLaneOptions,

425 + );

426 }

427 }

428 }

@@ -588,7 +599,9 @@ export function logSuspendedCommitPhase(

599 reusableLaneDevToolDetails.color = 'secondary-light';

600 reusableLaneOptions.start = startTime;

601 reusableLaneOptions.end = endTime;

591 - performance.measure('Suspended', reusableLaneOptions);

602 + // TODO: Make this conditionally "Suspended on Images" or both when we add Suspensey Images.

603 + // TODO: This might also be Suspended while waiting on a View Transition.

604 + performance.measure('Suspended on CSS', reusableLaneOptions);

605 }

606 }

607