Uh oh!
There was an error while loading. Please reload this page.
Track suspended time when the render doesn't commit because it suspended - #31552
Merged
Conversation
This stops whenever the same lane group starts rendering again. Clamped by the preceeding start time/event time/update time.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
react-sizebot
commented
Nov 15, 2024
Comparing: 0480cdb58c867c62586ff602fdb06a06c1d63f0c...8f869e55d80dd3862babb7e4e3f9b32050341983 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
eps1lon
approved these changes
Nov 19, 2024
sebmarkbage added a commit
that referenced
this pull request
Nov 19, 2024
Stacked on #31552. Must be tested with `enableSiblingPrerendering` off since the `use()` optimization is not on there yet. This adds a span to the Components track when we yield in the middle of the event loop. In this scenario, the "Render" span continues through out the Scheduler track. So you can see that the Component itself might not take a long time but yielding inside of it might. This lets you see if something was blocking the React render loop while yielding. If we're blocked 1ms or longer we log that as "Blocked". If we're yielding due to suspending in the middle of the work loop we log this as "Suspended". <img width="837" alt="Screenshot 2024-11-16 at 1 15 14 PM" src="https://github.com/user-attachments/assets/45a858ea-17e6-416c-af1a-78c126e033f3"> If the render doesn't commit because it restarts due to some other prewarming or because some non-`use()` suspends, it doesn't have from context components. <img width="971" alt="Screenshot 2024-11-16 at 1 13 55 PM" src="https://github.com/user-attachments/assets/a67724f8-702e-4e7d-9499-9ffc09541a61"> The `useActionState` path doesn't work yet because the `use()` optimization doesn't work there for some reason. But the idea is that it should mark the time that the component is blocked as Action instead of Suspended.
This was referenced Dec 4, 2024
cipolleschi added a commit
to cipolleschi/metro
that referenced
this pull request
Dec 11, 2024
Summary: X-link: react/react-native#48196 - **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>// - **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>// - **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>// - **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>// - **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>// - **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>// - **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>// - **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>// - **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>// - **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>// - **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>// - **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>// - **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>// - **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>// - **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>// - **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>// - **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>// - **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>// - **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>// - **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>// - **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>// - **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>// - **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>// - **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>// - **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>// - **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>// - **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>// - **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>// - **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>// - **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>// - **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>// - **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>// Changelog: [General][Changed] - Bump React from 18.3.1 to 19.0.0 jest_e2e[run_all_tests] Reviewed By: cortinico Differential Revision: D67018480
facebook-github-bot pushed a commit
to react/metro
that referenced
this pull request
Dec 16, 2024
Summary: X-link: react/react-native#48196 Pull Request resolved: #1400 - **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>// - **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>// - **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>// - **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>// - **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>// - **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>// - **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>// - **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>// - **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>// - **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>// - **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>// - **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>// - **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>// - **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>// - **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>// - **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>// - **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>// - **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>// - **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>// - **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>// - **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>// - **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>// - **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>// - **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>// - **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>// - **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>// - **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>// - **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>// - **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>// - **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>// - **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>// - **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>// Changelog: [General][Changed] - Bump React from 18.3.1 to 19.0.0 bypass-github-export-checks jest_e2e[run_all_tests] Reviewed By: cortinico Differential Revision: D67018480 fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
facebook-github-bot pushed a commit
to react/react-native
that referenced
this pull request
Dec 16, 2024
Summary: Pull Request resolved: #48196 X-link: react/metro#1400 - **[372ec00c03](react/react@372ec00c03 )**: Update ReactDebugInfo types to declare timing info separately ([#31714](react/react#31714)) //<Sebastian Markbåge>// - **[3d2ab01a55](react/react@3d2ab01a55 )**: [Flight] Extract special cases for Server Component return value position ([#31713](react/react#31713)) //<Sebastian Markbåge>// - **[1c9b138714](react/react@1c9b138714 )**: Don't serialize chunk ids for Hint and Console rows ([#31671](react/react#31671)) //<Sebastian Markbåge>// - **[de68d2f4a2](react/react@de68d2f4a2 )**: Register Suspense retry handlers in commit phase ([#31667](react/react#31667)) //<Josh Story>// - **[16d2bbbd1f](react/react@16d2bbbd1f )**: Client render dehydrated Suspense boundaries on document load ([#31620](react/react#31620)) //<Josh Story>// - **[5b0ef217ef](react/react@5b0ef217ef )**: s/server action/server function ([#31005](react/react#31005)) //<Ricky>// - **[e3b7ef32be](react/react@e3b7ef32be )**: [crud] Only export uRC when flag is enabled ([#31617](react/react#31617)) //<lauren>// - **[aba370f1e4](react/react@aba370f1e4 )**: Add moveBefore Experiment ([#31596](react/react#31596)) //<Sebastian Markbåge>// - **[1345c37941](react/react@1345c37941 )**: Mark all lanes in order on every new render ([#31615](react/react#31615)) //<Sebastian Markbåge>// - **[91061073d5](react/react@91061073d5 )**: Mark ping time as update ([#31611](react/react#31611)) //<Sebastian Markbåge>// - **[a9f14cb44e](react/react@a9f14cb44e )**: Fix Logging of Immediately Resolved Promises ([#31610](react/react#31610)) //<Sebastian Markbåge>// - **[c11c9510fa](react/react@c11c9510fa )**: [crud] Fix deps comparison bug ([#31599](react/react#31599)) //<lauren>// - **[64f89510af](react/react@64f89510af )**: [crud] Enable on RTR FB builds ([#31590](react/react#31590)) //<lauren>// - **[7558ffe84d](react/react@7558ffe84d )**: [crud] Fix copy paste typo ([#31588](react/react#31588)) //<lauren>// - **[7c254b6576](react/react@7c254b6576 )**: Log yielded time in the Component Track ([#31563](react/react#31563)) //<Sebastian Markbåge>// - **[6177b18c66](react/react@6177b18c66 )**: Track suspended time when the render doesn't commit because it suspended ([#31552](react/react#31552)) //<Sebastian Markbåge>// - **[eaf2d5c670](react/react@eaf2d5c670 )**: fix[eslint-plugin-react-hooks]: Fix error when callback argument is an identifier with an `as` expression ([#31119](react/react#31119)) //<Mark Skelton>// - **[047d95e85f](react/react@047d95e85f )**: [crud] Basic implementation ([#31523](react/react#31523)) //<lauren>// - **[92c0f5f85f](react/react@92c0f5f85f )**: Track separate SuspendedOnAction flag by rethrowing a separate SuspenseActionException sentinel ([#31554](react/react#31554)) //<Sebastian Markbåge>// - **[053b3cb050](react/react@053b3cb050 )**: [crud] Rename Effect type ([#31557](react/react#31557)) //<lauren>// - **[7dd6b9e68a](react/react@7dd6b9e68a )**: [crud] Add enableUseResourceEffectHook flag ([#31556](react/react#31556)) //<lauren>// - **[d8afd1c82e](react/react@d8afd1c82e )**: [crud] Scaffold initial types ([#31555](react/react#31555)) //<lauren>// - **[3720870a97](react/react@3720870a97 )**: Log Render Phases that Never Committed ([#31548](react/react#31548)) //<Sebastian Markbåge>// - **[8a41d6ceab](react/react@8a41d6ceab )**: Unify RootDidNotComplete and RootSuspendedWithDelay exit path ([#31547](react/react#31547)) //<Sebastian Markbåge>// - **[63cde684f5](react/react@63cde684f5 )**: (chore): copy fix in <style> precedence error ([#31524](react/react#31524)) //<Zack Tanner>// - **[b01722d585](react/react@b01722d585 )**: Format event with "warning" yellow and prefix with "Event: " ([#31536](react/react#31536)) //<Sebastian Markbåge>// - **[c13986da78](react/react@c13986da78 )**: Fix Overlapping "message" Bug in Performance Track ([#31528](react/react#31528)) //<Sebastian Markbåge>// - **[4686872159](react/react@4686872159 )**: Log passive commit phase when it wasn't delayed ([#31526](react/react#31526)) //<Sebastian Markbåge>// - **[5d89471ca6](react/react@5d89471ca6 )**: Export __COMPILER_RUNTIME in stable ([#31540](react/react#31540)) //<lauren>// - **[3644f0bd21](react/react@3644f0bd21 )**: Use completedRenderEndTime as the start of the commit phase if it's an immediate commit ([#31527](react/react#31527)) //<Sebastian Markbåge>// - **[8657869999](react/react@8657869999 )**: Separate Tracks for Components and Phases ([#31525](react/react#31525)) //<Sebastian Markbåge>// - **[b15135b9f5](react/react@b15135b9f5 )**: [ez] Update useMemoCache return type ([#31539](react/react#31539)) //<lauren>// Changelog: [General][Changed] - Bump React from 18.3.1 to 19.0.0 bypass-github-export-checks jest_e2e[run_all_tests] Reviewed By: cortinico Differential Revision: D67018480 fbshipit-source-id: 39bca3261ffaa8bb7d74187510724d77cc36b196
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When we suspend the render with delay, we won't do any more work until we get some kind of another update/ping. It's because conceptually something is suspended and then will update later. We need to highlight this period to show why it's not doing any work. We fill the empty space with "Suspended". This stops whenever the same lane group starts rendering again. Clamped by the preceeding start time/event time/update time.
Ideally we would instead start the next render and suspend the work loop at all places we suspend. In that mode this will instead show up as a very long "Render" with a "Suspended" period instead highlighted in the Components track as one component is suspended. We'll soon have that for
use()but not all updates so this covers the rest.One issue with
useActionStateis that it is implemented as suspending at the point of theuseActionStatewhich means that the period of the Action shows up as a suspended render instead of as an Action which happens for raw actions. This is not really how you conceptually think about it so we need some special case foruseActionState. In the screenshot above, the first "Suspended" is actually awaiting an Action and the second "Suspended" is awaiting the data from it.