Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

devtools: "What caused this update?" when a lazy component resolves #22603

Open
eps1lon opened this issue Oct 20, 2021 · 2 comments · May be fixed by #28330
Open

devtools: "What caused this update?" when a lazy component resolves #22603

eps1lon opened this issue Oct 20, 2021 · 2 comments · May be fixed by #28330
Labels
Component: Developer Tools React Core Team Opened by a member of the React Core Team Type: Bug

Comments

@eps1lon
Copy link
Collaborator

eps1lon commented Oct 20, 2021

React version: 18.2.0
Devtools version: 4.23.0-e28a0db22

Since #21171 React Devtools shows which fiber scheduled an update.

In the case of

root.render(
  <React.Suspense>
    <LazyComponent />
  </React.Suspense>
);

where LazyComponent is some React.lazy(() => {}) component we usually create two commits:

  1. initial render where LazyComponent suspends
  2. LazyComponents resolves

In legacy roots for the revealing commit Devtools displays the hostroot as the updater: https://github.com/facebook/react/pull/22602/files#diff-3582df0bd6a071e1986363b080d3012a9c492b8be7dd4e67f39d72078422d316R1368-R1376.
For new roots we get "unknown" for the second commit (i.e. no updates): https://github.com/facebook/react/pull/22602/files#diff-3582df0bd6a071e1986363b080d3012a9c492b8be7dd4e67f39d72078422d316R1267.
Codesandbox for full repro: https://codesandbox.io/p/sandbox/18-2-updaters-when-lazy-component-resolves-ff5x6h

I would've expected that for both roots we get the nearest Suspense boundary that can commit after LazyComponent resolved. Or at least the fiber that "unsuspended" (not sure if this is the right terminology). The corresponding hostroot wouldn't help me much but I'm not that concerned with legacy roots in this instance.

Right now the information isn't all that helpful. I noticed this especially for a larger apps with multiple suspense boundaries and partial hydration.

I profiled the same codesandbox in the scheduling profiler but also couldn't extract any useful information with regards to why the second commit happened.

Copy link

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 17, 2024
@eps1lon eps1lon added Type: Bug React Core Team Opened by a member of the React Core Team and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Resolution: Stale Automatically closed due to inactivity labels Apr 17, 2024
@eps1lon eps1lon reopened this Apr 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Developer Tools React Core Team Opened by a member of the React Core Team Type: Bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant