[DevTools] Pick up suspended by info from use()#34148
Merged
sebmarkbage merged 2 commits intofacebook:mainfrom Aug 11, 2025
Merged
[DevTools] Pick up suspended by info from use()#34148sebmarkbage merged 2 commits intofacebook:mainfrom
sebmarkbage merged 2 commits intofacebook:mainfrom
Conversation
github-actions
bot
added
the
React Core Team
eps1lon
approved these changes
Aug 11, 2025
sebmarkbage
force-pushed
the
devtoolsdebuggablestate
branch
from
f4b1e21 to
48d420a
Compare
sebmarkbage
force-pushed
the
devtoolsdebuggablestate
branch
from
48d420a to
5d19713
Compare
sebmarkbage
added a commit
that referenced
this pull request
Aug 11, 2025
… if any (#34162) Stacked on #34148. This picks up the stack for the await from the `use()` Hook if one was used to get this async info. When you select a component that used hooks, we already collect this information. If you select a Suspense boundary, this lazily invokes the first component that awaited this data to inspects its hooks and produce a stack trace for the use(). When all we have for the name is "Promise" I also use the name of the first callsite in the stack trace if there's more than one. Which in practice will be the name of the custom Hook that called it. Ideally we'd use source mapping and ignore listing for this but that would require suspending the display. We could maybe make the SuspendedByRow wrapped in a Suspense boundary for this case. <img width="438" height="401" alt="Screenshot 2025-08-10 at 10 07 55 PM" src="https://github.com/user-attachments/assets/2a68917d-c27b-4c00-84aa-0ceb51c4e541" />
unstubbable
reviewed
Aug 12, 2025
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 free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Similar to #34144 but for
use().use()dependencies don't get added to thefiber._debugInfoset because that just models the things blocking the children, and not the Fiber component itself. This picks up any debug info from the thenable state that we stashed onto_debugThenableStateso that we know it useduse().Without #34146 this doesn't pick up uninstrumented promises but after it, it'll pick those up as well. An instrumented promise that doesn't have anything in its debug info is not picked up. For example, if it didn't depend on any I/O on the server.
This doesn't yet pick up the stack trace of the
use()call. That information is in the Hooks information but needs a follow up to extract it.