Skip to content

Conversation

@sebmarkbage
Copy link
Collaborator

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.

Screenshot 2025-08-10 at 10 07 55 PM

@sebmarkbage sebmarkbage requested review from eps1lon and hoxyq August 11, 2025 02:10
@meta-cla meta-cla bot added the CLA Signed label Aug 11, 2025
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Aug 11, 2025
Comment on lines +94 to +95
// original entry. However, that would require suspending the immediate display
// of these rows to first do source mapping before we can show the name.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or put the sourcemapped asyncInfo into useDeferredValue in the parent

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would still need to show something faster for each keystroke so a placeholder with same height is probably best.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants