[Fizz] improve Hoistable handling for Elements and Resources inside Suspense Boundaries #28069
+488
−316
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
Hoistable elements and resources in fallbacks should not flush unless the fallback itself flushes. Previously we used a renderState-local binding to track the resources for the currently rendering boundary. Instead we now track this in the task itself and pass it to the functions that depend on it. This cleans up an unfortunate factoring that I put in before where during flushing we had to mimic the currently rendering Boundary to hoist correctly. This new factoring does the same thing but in a much clearer way. I do track the Boundary state separately from the Boundary itself on the task as a hot path optimization to avoid having to existence check the boundary in `pushStartInstance`. Conceptually tracking the boundary itself is sufficient but this eliminates an extra condition check. The implementation ended up not merging the boundary resource concept with hoistable state due to the very different nature in which these things need to hoist (one during task completion and the other during flush but only when flushing late boundaries). Given that I've gone back to resource specific naming rather than calling it BoundaryState.
facebook-github-bot
added
CLA Signed
React Core Team
gnoff
commented
Jan 24, 2024
| @@ -5214,9 +5256,13 @@ type StylesheetResource = { | |||
| state: StylesheetState, | |||
| }; | |||
|
|
|||
| export type BoundaryResources = { | |||
| export type BoundaryState = { | |||
There was a problem hiding this comment.
Not sure if this is the best name. I wanted something analagous to RenderState (akin to request state when combined with ResumableState) but since I can't really generalize this state b/c the Fizz runtime needs to understand the concept of hositables to a degree maybe I should name it HoistableState or something
Comment on lines
5263
to
5264
| charsetChunks: Array<Chunk | PrecomputedChunk>, | ||
| viewportChunks: Array<Chunk | PrecomputedChunk>, |
There was a problem hiding this comment.
Planning to move charset to config to avoid all this plumbing for something that should always be at the root and doesn't compose. Viewport is harder because it doesn't have to go at the top even though you'd definitely want it to.
| @@ -222,6 +224,7 @@ type RenderTask = { | |||
| childIndex: number, | |||
| ping: () => void, | |||
| blockedBoundary: Root | SuspenseBoundary, | |||
| blockedBoundaryState: null | BoundaryState, // Boundary state we'll mutate while rendering. This may not equal the state of the blockedBoundary | |||
There was a problem hiding this comment.
This is tricky. The blocked boundary is the one that can't actually be completed until all the tasks are done. For a fallback task this is the parent of the boundary the fallback is for. But for blockedBoundaryState it could the the state of the blockedBoundary (usually the case) but it could also be the fallbackState of the deeper boundary when the task is for generating the fallback. It's not really blocked so the terminology isn't quite right.
I think maybe renaming
BoundaryStatetoHoistableStateandblockedBounaryStatetohoistableState
Which may help with understanding
…ither during the preamble or when a boundary complets. The cost is that during the preamble flush there is an extra traversal of the segments that will write in the preamble. While this is not ideal for perf it does make the tracking significantly easier to follow and overall probalby strikes a better balance of practicality and maintainability over raw performance.
gnoff
force-pushed
the
complete-hoistables
branch
from
0db7029 to
852f521
Compare
|
I pushed an update which uses the I was also thinking about the ways we can still have hoistables leak into the DOM before a "commit" of a boundary. I believe this can happen when Root > Boundary A > Boundary B This is still much better than where we were before but it's unfortunate that it is the case |
|
As discussed, we'll do a write-as-we-go pass for the preamble, and stop writing hoistables inside fallbacks since we won't remove them. Fallbacks are not full fidelity anyway since they're not hydrated and it might not be worth the temporary state. |
gnoff
force-pushed
the
complete-hoistables
branch
from
9a18ab4 to
0251ed2
Compare
…able is not in a fallback tree. Effectively it makes hoistable elements deep in any fallback noops. The logic here is that fallbacks aren't hydrated, they're always either replaced by the server or client rendered. In either case the primary content should be replacing the fallback hositables and since hoistable elements are really just metadata the imperative need to transiently render them is not as well justified. This avoids a host of complexities around deleting hoistables from fallbacks when the boundary reveals it's content. Along with this change I made it so primary content hositables flush eagerly and do not wait for their containing boundary to complete first. This is a progmatic solution to the problem of prerendering. when prerendering we assume that all transent state is entirely flushed in the static prelude however by holding back hoistables until the boundary is complete this is violated. We would either need to conditionally emit hoistables for incomplete boundaries when prerending or we would need to serialize the state of the hoistables to recover them on the resuem path. The arguments for holding them back are that it aligns with client hoistable semantics better and if the boundary never hydrates the hoistables will get orphaned. Both of these problems are not insignificant but are also not necessarily blockers and so this approach attempts to balance complexity over impact by emitting them eagerly.
gnoff
force-pushed
the
complete-hoistables
branch
from
0251ed2 to
eed492e
Compare
|
@sebmarkbage updated description with slightly modified approach. basically what we discussed but now primary content hoistables can and will flush early to avoid the problem of lost state across prerender/resume |
gnoff
changed the title
|
Maybe update the description to include the rationale for why leaving things emitting early is conceptually ok. We decided that emitting hoistables before the Suspense boundary is revealed because we also emit hidden segments early. This means that a naive parser would find things early anyway. It also doesn't really hurt revealing it early because the idea is that it'll eventually end up showing up anyway. |
sebmarkbage
approved these changes
Jan 26, 2024
sebmarkbage
approved these changes
Jan 26, 2024
There was a problem hiding this comment.
I don't love the isFallback flag. Seems unnecessary brute force and specific.
It felt a little cleaner to just always write the hoistables to the boundary's fallback hoistables and then just not hoist/flush them but not sure if that strategy is incompatible with your other change.
Conceptually cleaner but wasteful compute. we're never going to flush so why bother encoding. I don't love the flag either but would rather not do extra work for no gain |
|
Sorry to butt in, but does this affect inline styles? i think those are considered hoistable too, right? <style data-href={hash} precedence=“whatever”>
{content}
</style>(as in: https://x.com/sebmarkbage/status/1748900031199879298?s=20) i think this is something CSS-in-JS (and adjacent) libraries are counting on, so not being able to use it for styling within fallbacks would be unfortunate... |
|
@lubieowoce there are two kinds of Hoistable semantics Hoistable Elements are just regular html tags that happen to flush (SSR) or insert (browser) outside of the component tree that rendered them. This is the nature of what makes cleaning them up on boundary completion hard because before this semantic existed everything inside a Suspense was rendered structurally as a child of that boundary in the DOM. This PR makes it so Hoistable Elements that are SSR'd in a fallback simply never flush. In practice this is the title tag, meta tags, and link tags that are not Hoistable Resources (stylesheets with precedence) Hoistable Resources are a more distinct concept. Most Resources are created using The same holds for style tags that have href and precedence. this is an analog to a Stylesheet Resource but just for inline styles so you can depend on the Resource in a fallback and it will be flushed before the fallback is. It's important to note though that Resources have no cleanup guarantees. Today Resources are never cleaned up and in the future we will add some form of garbage collection but it isn't a discrete process and any given Resource could stay around in the DOM for arbitrary time. So to directly answer the question, this PR won't affect the style tag example you gave and that is because Hoistable Elements are distinct from Hoistable Resources. |
gnoff
changed the title
github-actions bot
pushed a commit
that referenced
this pull request
Jan 30, 2024
…uspense Boundaries (#28069) Updates Fizz to handle Hoistables (Resources and Elements) in a way that better aligns with Suspense fallbacks 1. Hoistable Elements inside a fallback (regardless of how deep and how many additional boundaries are intermediate) will be ignored. The reasoning is fallbacks are transient and since there is not good way to clean up hoistables because they escape their Suspense container its better to not emit them in the first place. SSR fallbacks are already not full fidelity because they never hydrate so this aligns with that somewhat. 2. Hoistable stylesheets in fallbacks will only block the reveal of a parent suspense boundary if the fallback is going to flush with that completed parent suspense boundary. Previously if you rendered a stylesheet Resource inside a fallback any parent suspense boundaries that completed after the shell flushed would include that resource in the set required to resolve before the boundary reveal happens on the client. This is not a semantic change, just a performance optimization 3. preconnect and preload hoistable queues are gone, if you want to optimize resource loading you shoudl use `ReactDOM.preconnect` and `ReactDOM.preload`. `viewport` meta tags get their own queue because they need to go before any preloads since they affect the media state. In addition to those functional changes this PR also refactors the boundary resource tracking by moving it to the task rather than using function calls at the start of each render and flush. Tasks also now track whether they are a fallback task supercedes prior work here: #27534 DiffTrain build for [554fc49](554fc49)
|
@gnoff that's a lovely explanation, thank you! |
gnoff
added a commit
to gnoff/next.js
that referenced
this pull request
Feb 1, 2024
- facebook/react#28183 - facebook/react#28125 - facebook/react#28157 - facebook/react#28115 - facebook/react#28124 - facebook/react#28163 - facebook/react#28164 - facebook/react#28150 - facebook/react#28159 - facebook/react#28069 - facebook/react#28110 - facebook/react#28148 - facebook/react#28116 - facebook/react#28099 - facebook/react#28100 - facebook/react#28147 - facebook/react#28128 - facebook/react#28126 - facebook/react#28139 - facebook/react#28140 - facebook/react#28141 - facebook/react#28142 - facebook/react#28113 - facebook/react#28129 - facebook/react#28114 - facebook/react#28053 - facebook/react#28091 - facebook/react#28087 - facebook/react#28112 - facebook/react#28086 - facebook/react#28101 - facebook/react#28106 - facebook/react#28117 - facebook/react#28118 - facebook/react#28105 - facebook/react#27883 - facebook/react#28111 - facebook/react#28095 - facebook/react#28108 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939
gaearon
pushed a commit
that referenced
this pull request
Feb 3, 2024
…uspense Boundaries (#28069) Updates Fizz to handle Hoistables (Resources and Elements) in a way that better aligns with Suspense fallbacks 1. Hoistable Elements inside a fallback (regardless of how deep and how many additional boundaries are intermediate) will be ignored. The reasoning is fallbacks are transient and since there is not good way to clean up hoistables because they escape their Suspense container its better to not emit them in the first place. SSR fallbacks are already not full fidelity because they never hydrate so this aligns with that somewhat. 2. Hoistable stylesheets in fallbacks will only block the reveal of a parent suspense boundary if the fallback is going to flush with that completed parent suspense boundary. Previously if you rendered a stylesheet Resource inside a fallback any parent suspense boundaries that completed after the shell flushed would include that resource in the set required to resolve before the boundary reveal happens on the client. This is not a semantic change, just a performance optimization 3. preconnect and preload hoistable queues are gone, if you want to optimize resource loading you shoudl use `ReactDOM.preconnect` and `ReactDOM.preload`. `viewport` meta tags get their own queue because they need to go before any preloads since they affect the media state. In addition to those functional changes this PR also refactors the boundary resource tracking by moving it to the task rather than using function calls at the start of each render and flush. Tasks also now track whether they are a fallback task supercedes prior work here: #27534
gnoff
added a commit
to gnoff/next.js
that referenced
this pull request
Feb 5, 2024
- facebook/react#28183 - facebook/react#28125 - facebook/react#28157 - facebook/react#28115 - facebook/react#28124 - facebook/react#28163 - facebook/react#28164 - facebook/react#28150 - facebook/react#28159 - facebook/react#28069 - facebook/react#28110 - facebook/react#28148 - facebook/react#28116 - facebook/react#28099 - facebook/react#28100 - facebook/react#28147 - facebook/react#28128 - facebook/react#28126 - facebook/react#28139 - facebook/react#28140 - facebook/react#28141 - facebook/react#28142 - facebook/react#28113 - facebook/react#28129 - facebook/react#28114 - facebook/react#28053 - facebook/react#28091 - facebook/react#28087 - facebook/react#28112 - facebook/react#28086 - facebook/react#28101 - facebook/react#28106 - facebook/react#28117 - facebook/react#28118 - facebook/react#28105 - facebook/react#27883 - facebook/react#28111 - facebook/react#28095 - facebook/react#28108 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939
gnoff
added a commit
to gnoff/next.js
that referenced
this pull request
Feb 6, 2024
- facebook/react#28250 - facebook/react#28225 - facebook/react#28123 - facebook/react#28240 - facebook/react#28239 - facebook/react#28245 - facebook/react#28244 - facebook/react#28238 - facebook/react#28235 - facebook/react#28221 - facebook/react#28215 - facebook/react#28214 - facebook/react#28213 - facebook/react#28212 - facebook/react#28211 - facebook/react#28247 - facebook/react#28210 - facebook/react#28186 - facebook/react#28232 - facebook/react#28169 - facebook/react#28177 - facebook/react#28170 - facebook/react#28168 - facebook/react#28122 - facebook/react#27982 - facebook/react#28217 - facebook/react#28223 - facebook/react#28208 - facebook/react#28209 - facebook/react#28200 - facebook/react#28199 - facebook/react#28198 - facebook/react#28197 - facebook/react#28196 - facebook/react#28194 - facebook/react#28192 - facebook/react#28191 - facebook/react#28182 - facebook/react#28181 - facebook/react#28180 - facebook/react#28178 - facebook/react#28201 - facebook/react#28176 - facebook/react#28162 - facebook/react#28131 - facebook/react#28190 - facebook/react#28172 - facebook/react#28171 - facebook/react#28173 - facebook/react#28174 - facebook/react#28175 - facebook/react#28136 - facebook/react#28135 - facebook/react#28134 - facebook/react#28133 - facebook/react#28132 - facebook/react#28130 - facebook/react#28202 - facebook/react#28102 - facebook/react#28161 - facebook/react#28193 - facebook/react#28195 - facebook/react#28189 - facebook/react#28160 - facebook/react#28096 - facebook/react#28183 - facebook/react#28125 - facebook/react#28157 - facebook/react#28115 - facebook/react#28124 - facebook/react#28163 - facebook/react#28164 - facebook/react#28150 - facebook/react#28159 - facebook/react#28069 - facebook/react#28110 - facebook/react#28148 - facebook/react#28116 - facebook/react#28099 - facebook/react#28100 - facebook/react#28147 - facebook/react#28128 - facebook/react#28126 - facebook/react#28139 - facebook/react#28140 - facebook/react#28141 - facebook/react#28142 - facebook/react#28113 - facebook/react#28129 - facebook/react#28114 - facebook/react#28053 - facebook/react#28091 - facebook/react#28087 - facebook/react#28112 - facebook/react#28086 - facebook/react#28101 - facebook/react#28106 - facebook/react#28117 - facebook/react#28118 - facebook/react#28105 - facebook/react#27883 - facebook/react#28111 - facebook/react#28095 - facebook/react#28108 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939
gnoff
added a commit
to gnoff/next.js
that referenced
this pull request
Feb 6, 2024
- facebook/react#28250 - facebook/react#28225 - facebook/react#28123 - facebook/react#28240 - facebook/react#28239 - facebook/react#28245 - facebook/react#28244 - facebook/react#28238 - facebook/react#28235 - facebook/react#28221 - facebook/react#28215 - facebook/react#28214 - facebook/react#28213 - facebook/react#28212 - facebook/react#28211 - facebook/react#28247 - facebook/react#28210 - facebook/react#28186 - facebook/react#28232 - facebook/react#28169 - facebook/react#28177 - facebook/react#28170 - facebook/react#28168 - facebook/react#28122 - facebook/react#27982 - facebook/react#28217 - facebook/react#28223 - facebook/react#28208 - facebook/react#28209 - facebook/react#28200 - facebook/react#28199 - facebook/react#28198 - facebook/react#28197 - facebook/react#28196 - facebook/react#28194 - facebook/react#28192 - facebook/react#28191 - facebook/react#28182 - facebook/react#28181 - facebook/react#28180 - facebook/react#28178 - facebook/react#28201 - facebook/react#28176 - facebook/react#28162 - facebook/react#28131 - facebook/react#28190 - facebook/react#28172 - facebook/react#28171 - facebook/react#28173 - facebook/react#28174 - facebook/react#28175 - facebook/react#28136 - facebook/react#28135 - facebook/react#28134 - facebook/react#28133 - facebook/react#28132 - facebook/react#28130 - facebook/react#28202 - facebook/react#28102 - facebook/react#28161 - facebook/react#28193 - facebook/react#28195 - facebook/react#28189 - facebook/react#28160 - facebook/react#28096 - facebook/react#28183 - facebook/react#28125 - facebook/react#28157 - facebook/react#28115 - facebook/react#28124 - facebook/react#28163 - facebook/react#28164 - facebook/react#28150 - facebook/react#28159 - facebook/react#28069 - facebook/react#28110 - facebook/react#28148 - facebook/react#28116 - facebook/react#28099 - facebook/react#28100 - facebook/react#28147 - facebook/react#28128 - facebook/react#28126 - facebook/react#28139 - facebook/react#28140 - facebook/react#28141 - facebook/react#28142 - facebook/react#28113 - facebook/react#28129 - facebook/react#28114 - facebook/react#28053 - facebook/react#28091 - facebook/react#28087 - facebook/react#28112 - facebook/react#28086 - facebook/react#28101 - facebook/react#28106 - facebook/react#28117 - facebook/react#28118 - facebook/react#28105 - facebook/react#27883 - facebook/react#28111 - facebook/react#28095 - facebook/react#28108 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939
gnoff
added a commit
to vercel/next.js
that referenced
this pull request
Feb 6, 2024
Updates React from 60a927d04 to 2bc7d336a Also updates aliases for `react.shared-subset` to `react.react-server` ### React upstream changes - facebook/react#28250 - facebook/react#28225 - facebook/react#28123 - facebook/react#28240 - facebook/react#28239 - facebook/react#28245 - facebook/react#28244 - facebook/react#28238 - facebook/react#28235 - facebook/react#28221 - facebook/react#28215 - facebook/react#28214 - facebook/react#28213 - facebook/react#28212 - facebook/react#28211 - facebook/react#28247 - facebook/react#28210 - facebook/react#28186 - facebook/react#28232 - facebook/react#28169 - facebook/react#28177 - facebook/react#28170 - facebook/react#28168 - facebook/react#28122 - facebook/react#27982 - facebook/react#28217 - facebook/react#28223 - facebook/react#28208 - facebook/react#28209 - facebook/react#28200 - facebook/react#28199 - facebook/react#28198 - facebook/react#28197 - facebook/react#28196 - facebook/react#28194 - facebook/react#28192 - facebook/react#28191 - facebook/react#28182 - facebook/react#28181 - facebook/react#28180 - facebook/react#28178 - facebook/react#28201 - facebook/react#28176 - facebook/react#28162 - facebook/react#28131 - facebook/react#28190 - facebook/react#28172 - facebook/react#28171 - facebook/react#28173 - facebook/react#28174 - facebook/react#28175 - facebook/react#28136 - facebook/react#28135 - facebook/react#28134 - facebook/react#28133 - facebook/react#28132 - facebook/react#28130 - facebook/react#28202 - facebook/react#28102 - facebook/react#28161 - facebook/react#28193 - facebook/react#28195 - facebook/react#28189 - facebook/react#28160 - facebook/react#28096 - facebook/react#28183 - facebook/react#28125 - facebook/react#28157 - facebook/react#28115 - facebook/react#28124 - facebook/react#28163 - facebook/react#28164 - facebook/react#28150 - facebook/react#28159 - facebook/react#28069 - facebook/react#28110 - facebook/react#28148 - facebook/react#28116 - facebook/react#28099 - facebook/react#28100 - facebook/react#28147 - facebook/react#28128 - facebook/react#28126 - facebook/react#28139 - facebook/react#28140 - facebook/react#28141 - facebook/react#28142 - facebook/react#28113 - facebook/react#28129 - facebook/react#28114 - facebook/react#28053 - facebook/react#28091 - facebook/react#28087 - facebook/react#28112 - facebook/react#28086 - facebook/react#28101 - facebook/react#28106 - facebook/react#28117 - facebook/react#28118 - facebook/react#28105 - facebook/react#27883 - facebook/react#28111 - facebook/react#28095 - facebook/react#28108 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 - facebook/react#28090 - facebook/react#28089 - facebook/react#28076 - facebook/react#28074 - facebook/react#28103 - facebook/react#28098 - facebook/react#28097 - facebook/react#28068 - facebook/react#28093 - facebook/react#28094 - facebook/react#28073 - facebook/react#28084 - facebook/react#28063 - facebook/react#28085 - facebook/react#28083 - facebook/react#28065 - facebook/react#28061 - facebook/react#28077 - facebook/react#28075 - facebook/react#28078 - facebook/react#28050 - facebook/react#28011 - facebook/react#28055 - facebook/react#28066 - facebook/react#28067 - facebook/react#28010 - facebook/react#27993 - facebook/react#28052 - facebook/react#28060 - facebook/react#28059 - facebook/react#28034 - facebook/react#28033 - facebook/react#28004 - facebook/react#28051 - facebook/react#28012 - facebook/react#28001 - facebook/react#28002 - facebook/react#27995 - facebook/react#28006 - facebook/react#28005 - facebook/react#28007 - facebook/react#28008 - facebook/react#28009 - facebook/react#28000 - facebook/react#28003 - facebook/react#27997 - facebook/react#27240 - facebook/react#27977 - facebook/react#27940 - facebook/react#27939 Closes NEXT-2331
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
…uspense Boundaries (facebook#28069) Updates Fizz to handle Hoistables (Resources and Elements) in a way that better aligns with Suspense fallbacks 1. Hoistable Elements inside a fallback (regardless of how deep and how many additional boundaries are intermediate) will be ignored. The reasoning is fallbacks are transient and since there is not good way to clean up hoistables because they escape their Suspense container its better to not emit them in the first place. SSR fallbacks are already not full fidelity because they never hydrate so this aligns with that somewhat. 2. Hoistable stylesheets in fallbacks will only block the reveal of a parent suspense boundary if the fallback is going to flush with that completed parent suspense boundary. Previously if you rendered a stylesheet Resource inside a fallback any parent suspense boundaries that completed after the shell flushed would include that resource in the set required to resolve before the boundary reveal happens on the client. This is not a semantic change, just a performance optimization 3. preconnect and preload hoistable queues are gone, if you want to optimize resource loading you shoudl use `ReactDOM.preconnect` and `ReactDOM.preload`. `viewport` meta tags get their own queue because they need to go before any preloads since they affect the media state. In addition to those functional changes this PR also refactors the boundary resource tracking by moving it to the task rather than using function calls at the start of each render and flush. Tasks also now track whether they are a fallback task supercedes prior work here: facebook#27534
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
…uspense Boundaries (#28069) Updates Fizz to handle Hoistables (Resources and Elements) in a way that better aligns with Suspense fallbacks 1. Hoistable Elements inside a fallback (regardless of how deep and how many additional boundaries are intermediate) will be ignored. The reasoning is fallbacks are transient and since there is not good way to clean up hoistables because they escape their Suspense container its better to not emit them in the first place. SSR fallbacks are already not full fidelity because they never hydrate so this aligns with that somewhat. 2. Hoistable stylesheets in fallbacks will only block the reveal of a parent suspense boundary if the fallback is going to flush with that completed parent suspense boundary. Previously if you rendered a stylesheet Resource inside a fallback any parent suspense boundaries that completed after the shell flushed would include that resource in the set required to resolve before the boundary reveal happens on the client. This is not a semantic change, just a performance optimization 3. preconnect and preload hoistable queues are gone, if you want to optimize resource loading you shoudl use `ReactDOM.preconnect` and `ReactDOM.preload`. `viewport` meta tags get their own queue because they need to go before any preloads since they affect the media state. In addition to those functional changes this PR also refactors the boundary resource tracking by moving it to the task rather than using function calls at the start of each render and flush. Tasks also now track whether they are a fallback task supercedes prior work here: #27534 DiffTrain build for commit 554fc49.
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.
Updates Fizz to handle Hoistables (Resources and Elements) in a way that better aligns with Suspense fallbacks
ReactDOM.preconnectandReactDOM.preload.viewportmeta tags get their own queue because they need to go before any preloads since they affect the media state.In addition to those functional changes this PR also refactors the boundary resource tracking by moving it to the task rather than using function calls at the start of each render and flush. Tasks also now track whether they are a fallback task
supercedes prior work here: #27534