Description
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:
- initial render where
LazyComponentsuspends LazyComponentsresolves
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.
Activity