From d2dee57ee1be4cf0f53e17c8add0b4f33b114da7 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 2 Apr 2025 14:15:25 -0400 Subject: [PATCH 1/3] Rename "Suspended" commit to "Suspended on CSS" since that's the only reason 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. --- packages/react-reconciler/src/ReactFiberPerformanceTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index ae48ed383413a..47c305a09e9cc 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -588,7 +588,9 @@ export function logSuspendedCommitPhase( reusableLaneDevToolDetails.color = 'secondary-light'; reusableLaneOptions.start = startTime; reusableLaneOptions.end = endTime; - performance.measure('Suspended', reusableLaneOptions); + // TODO: Make this conditionally "Suspended on Images" or both when we add Suspensey Images. + // TODO: This might also be Suspended while waiting on a View Transition. + performance.measure('Suspended on CSS', reusableLaneOptions); } } From 54919f236f3a1aee081f4923bee2d4bd84a7e84a Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 2 Apr 2025 14:24:01 -0400 Subject: [PATCH 2/3] Only log blocked if it's 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". --- packages/react-reconciler/src/ReactFiberPerformanceTrack.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 47c305a09e9cc..0d11fd041a62b 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -284,7 +284,7 @@ export function logComponentEffect( export function logYieldTime(startTime: number, endTime: number): void { if (supportsUserTiming) { const yieldDuration = endTime - startTime; - if (yieldDuration < 1) { + if (yieldDuration < 3) { // Skip sub-millisecond yields. This happens all the time and is not interesting. return; } @@ -299,6 +299,10 @@ export function logYieldTime(startTime: number, endTime: number): void { : 'error'; reusableComponentOptions.start = startTime; reusableComponentOptions.end = endTime; + // This get logged in the components track if we don't commit which leaves them + // hanging by themselves without context. It's a useful indicator for why something + // might be starving this render though. + // TODO: Considering adding these to a queue and only logging them if we commit. performance.measure('Blocked', reusableComponentOptions); } } From 3e151657e829ca2c11ef96794750eda2715d9b2f Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 2 Apr 2025 14:28:49 -0400 Subject: [PATCH 3/3] Rename "Blocked" to "Update" This is when a setState happens and with stack traces it's where you should look for the stack trace of the setState. I only added the "Blocked" part if we're blocked for more than 5ms indicating that some other track was working at the same time and preventing us from rendering. --- .../src/ReactFiberPerformanceTrack.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js index 0d11fd041a62b..3a36572e8ab02 100644 --- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js +++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js @@ -369,7 +369,11 @@ export function logBlockingStart( reusableLaneOptions.start = updateTime; reusableLaneOptions.end = renderStartTime; performance.measure( - isSpawnedUpdate ? 'Cascade' : 'Blocked', + isSpawnedUpdate + ? 'Cascading Update' + : renderStartTime - updateTime > 5 + ? 'Update Blocked' + : 'Update', reusableLaneOptions, ); } @@ -415,7 +419,10 @@ export function logTransitionStart( reusableLaneDevToolDetails.color = 'primary-light'; reusableLaneOptions.start = updateTime; reusableLaneOptions.end = renderStartTime; - performance.measure('Blocked', reusableLaneOptions); + performance.measure( + renderStartTime - updateTime > 5 ? 'Update Blocked' : 'Update', + reusableLaneOptions, + ); } } }