[DevTools] Inspect the Initial Paint when inspecting a Root #34454
Conversation
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
github-actions
bot
added
the
React Core Team
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
2 times, most recently
from
93b4e45 to
13aec7d
Compare
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
2 times, most recently
from
50b7026 to
4cd5bab
Compare
|
We'll instead merge all roots into a virtual one for inspection and select that when clicking the background of the rects |
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
from
4cd5bab to
2b9fd99
Compare
eps1lon
changed the title
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
4 times, most recently
from
43497d9 to
934f87b
Compare
eps1lon
changed the title
eps1lon
changed the title
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
2 times, most recently
from
e078537 to
504c5cd
Compare
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
from
504c5cd to
0d36a72
Compare
sebmarkbage
approved these changes
Oct 2, 2025
legacy renderer doesn't have something interesting to inspect so we ignore those
eps1lon
force-pushed
the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
from
cdf8df6 to
6aab95d
Compare
eps1lon
deleted the
sebbie/09-10-_devtools_draw_rect_for_react_root_in_suspense_tab
branch
sebmarkbage
added a commit
that referenced
this pull request
Oct 2, 2025
…efault (#34654) Rebased on #34454. Always include the root in the timeline even if it has no unique suspenders, since even if it won't suspend, we have to be able to see that and step to one step before the next boundary to see the first boundary that does suspend in its fallback state. Also, if there's no current selection on initial mount, select the last entry in the timeline. We usually do this with `selectedSuspenseID` but that doesn't happen on initial load. So this does it on initial load if nothing else is selected by then. That way when you reload you get the initial root selected. There's a problem here because we should really use one source of truth and `selectedSuspenseID` doesn't really do anything now. Either it should be its separate source of truth and you can't show components in the side-panel or it should be derived from the other state. If it's derived, once there's a selection, e.g. in the root, then even if new timelines load it will never change but that's probably a good thing.
This was referenced Oct 3, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Stacked on #34661
The Screen (displayed as "Initial Paint") is the union of all Roots known to React DevTools.
When inspecting the Screen only the Roots of a single renderer implementation can be merged. We only merge "suspended by" for the Screen. Since only the Fiber renderer implements "suspended by", we only implement inspecting roots for that renderer.
Merging roots from different renderers implementations would require forking of the Frontend so that hydrating inspected data uses the right renderer implementation.
Highlighting a host instance uses the same shortcut: highlighting a Root highlights the Screen.
We could also introduce special methods if we want to allow inspection of Roots or Screens. Right now equating the two seems to make sense since you only inspect Roots in the Suspense tab.
The red pill on the bottom left is a separate React Root from a different bundle.
CleanShot.2025-09-29.at.16.08.20.mp4