[Flight] Stack Parallel Components in Separate Tracks #31735
Merged
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
the
React Core Team
sebmarkbage
force-pushed
the
flightparalleltracks
branch
from
cf39c17 to
3c83561
Compare
eps1lon
approved these changes
Dec 16, 2024
|
It reuses them when we're all the way back up to the first parent that spawned the children at that level. I was originally going to try to pack children from other siblings in if the parent had space in an early finished track but that meant it would be really hard to understand which parent it belongs to since it'll look like a sibling at that level. |
sebmarkbage
added a commit
that referenced
this pull request
Dec 16, 2024
…/Components Tracks (#31736) Stacked on #31735. This ensures that Server Components Track comes first. Since it's typically rendered first on the server for initial load and then flows into scheduler and client components work. Also puts it closer to the Network and further away from "Main" JS. <img width="769" alt="Screenshot 2024-12-11 at 5 31 41 PM" src="https://github.com/user-attachments/assets/7198db0f-075e-4a78-8ea4-3bfbf06727cb" /> Same trick as in #31615.
davesnx
added a commit
to davesnx/react
that referenced
this pull request
Dec 18, 2024
…act into issue-31578-setter-arity-gcc * 'issue-31578-setter-arity-gcc' of github.com:/davesnx/react: [flags] Clean up scheduler flags (facebook#31814) Enable debugRenderPhaseSideEffectsForStrictMode in test renderers (facebook#31761) Enable disableDefaultPropsExceptForClasses (facebook#31804) Turn on useModernStrictMode in test renderers (facebook#31769) [compiler][ez] Add shape for global Object.keys (facebook#31583) [compiler] Context variables as dependencies (facebook#31582) [compiler] Add fire to known React APIs (facebook#31795) [compiler] Add option for firing effect functions (facebook#31794) [compiler][be] Logger based debug printing in test runner (facebook#31809) [compiler][ez] Clean up duplicate code in propagateScopeDeps (facebook#31581) [compiler] Repro for aliased captures within inner function expressions (facebook#31770) [compiler][be] Playground now compiles entire program (facebook#31774) [Flight] Color and badge non-primary environments (facebook#31738) [Flight] Emit Deduped Server Components Marker (facebook#31737) [Flight] Sort Server Components Track Group ahead of Client Scheduler/Components Tracks (facebook#31736) Clean up context access profiling experiment (facebook#31806) [Flight] Stack Parallel Components in Separate Tracks (facebook#31735) Flag for requestPaint (facebook#31805)
This was referenced Dec 18, 2024
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 #31729
The Server Components visualization is currently a tree flame graph where parent spans the child. This makes it equivalent to the Client Components visualization.
However, since Server Components can be async and therefore parallel, we need to do something when two children are executed in parallel. This PR bumps parallel children into a separate track and then within that track if that child has more children it can grow within that track.
I currently just cut off more than 10 parallel tracks.
Synchronous Server Components are still in sequence but it's unlikely because even a simple microtasky Async Component is still parallel.
I think this is probably not a very useful visualization for Server Components but we can try it out.
I'm also going to try a different visualization where parent-child relationship is horizontal and parallel vertical instead, but it might not be possible to make that line up in this tool. It makes it a little harder to see how much different components (including their children) impact the overall tree. If that's the only visualization it's also confusing why it's different dimensions than the Client Component version.