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

[Float][Fiber] Do not reinsert stylesheets after initial insert #27586

Merged
merged 1 commit into from
Oct 25, 2023

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Oct 25, 2023

The loading state tracking for suspensey CSS is too complicated. Prior to this change it had a state it could enter into where a stylesheet was already in the DOM but the loading state did not know it was inserted causing a later transition to try to insert it again.

This fix is to add proper tracking of insertions on the codepaths that were missing it. It also modifies the logic of when to suspend based on whether the stylesheet has already been inserted or not.

This is not 100% correct semantics however because a prior commit could have inserted a stylesheet and a later transition should ideally be able to wait on that load before committing. I haven't attempted to fix this yet however because the loading state tracking is too complicated as it is and requires a more thorough refactor. Additionally it's not particularly valuable to delay a transition on a loading stylesheet when a previous commit also relied on that stylesheet but didn't wait for it b/c it was sync. I will follow up with an improvement PR later

fixes: #27585

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Oct 25, 2023
@gnoff gnoff requested review from sebmarkbage and acdlite October 25, 2023 18:41
@gnoff
Copy link
Collaborator Author

gnoff commented Oct 25, 2023

reviewing without whitespace will better show the diff. it's small

@react-sizebot
Copy link

Comparing: 51ffd35...65c8ac5

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.03% 175.04 kB 175.09 kB +0.02% 54.47 kB 54.47 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.02% 177.17 kB 177.21 kB +0.02% 55.15 kB 55.16 kB
facebook-www/ReactDOM-prod.classic.js +0.02% 567.61 kB 567.70 kB +0.01% 99.94 kB 99.96 kB
facebook-www/ReactDOM-prod.modern.js +0.02% 551.47 kB 551.56 kB +0.02% 97.04 kB 97.05 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 65c8ac5

@gnoff gnoff merged commit a998552 into facebook:main Oct 25, 2023
2 checks passed
@gnoff gnoff deleted the fix-style-insert branch October 25, 2023 18:51
@gnoff gnoff changed the title [Fizz] Do not reinsert stylesheets after initial insert [Float][Fiber] Do not reinsert stylesheets after initial insert Oct 25, 2023
github-actions bot pushed a commit that referenced this pull request Oct 25, 2023
The loading state tracking for suspensey CSS is too complicated. Prior
to this change it had a state it could enter into where a stylesheet was
already in the DOM but the loading state did not know it was inserted
causing a later transition to try to insert it again.

This fix is to add proper tracking of insertions on the codepaths that
were missing it. It also modifies the logic of when to suspend based on
whether the stylesheet has already been inserted or not.

This is not 100% correct semantics however because a prior commit could
have inserted a stylesheet and a later transition should ideally be able
to wait on that load before committing. I haven't attempted to fix this
yet however because the loading state tracking is too complicated as it
is and requires a more thorough refactor. Additionally it's not
particularly valuable to delay a transition on a loading stylesheet when
a previous commit also relied on that stylesheet but didn't wait for it
b/c it was sync. I will follow up with an improvement PR later

fixes: #27585

DiffTrain build for [a998552](a998552)
timneutkens pushed a commit to vercel/next.js that referenced this pull request Oct 25, 2023
React upstream changes:

- facebook/react#27586
- facebook/react#27577
- facebook/react#27576

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@@ -2337,7 +2337,7 @@ function preinitStyle(
getStylesheetSelectorFromKey(key),
);
if (instance) {
state.loading = Loaded;
state.loading = Loaded & Inserted;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gnoff Did you mean Loaded | Inserted here? Currently this would be 0?

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
The loading state tracking for suspensey CSS is too complicated. Prior
to this change it had a state it could enter into where a stylesheet was
already in the DOM but the loading state did not know it was inserted
causing a later transition to try to insert it again.

This fix is to add proper tracking of insertions on the codepaths that
were missing it. It also modifies the logic of when to suspend based on
whether the stylesheet has already been inserted or not.

This is not 100% correct semantics however because a prior commit could
have inserted a stylesheet and a later transition should ideally be able
to wait on that load before committing. I haven't attempted to fix this
yet however because the loading state tracking is too complicated as it
is and requires a more thorough refactor. Additionally it's not
particularly valuable to delay a transition on a loading stylesheet when
a previous commit also relied on that stylesheet but didn't wait for it
b/c it was sync. I will follow up with an improvement PR later

fixes: facebook#27585
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
The loading state tracking for suspensey CSS is too complicated. Prior
to this change it had a state it could enter into where a stylesheet was
already in the DOM but the loading state did not know it was inserted
causing a later transition to try to insert it again.

This fix is to add proper tracking of insertions on the codepaths that
were missing it. It also modifies the logic of when to suspend based on
whether the stylesheet has already been inserted or not.

This is not 100% correct semantics however because a prior commit could
have inserted a stylesheet and a later transition should ideally be able
to wait on that load before committing. I haven't attempted to fix this
yet however because the loading state tracking is too complicated as it
is and requires a more thorough refactor. Additionally it's not
particularly valuable to delay a transition on a loading stylesheet when
a previous commit also relied on that stylesheet but didn't wait for it
b/c it was sync. I will follow up with an improvement PR later

fixes: #27585

DiffTrain build for commit a998552.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: hoisted stylesheets should not reorder when re-rendered in a transition
5 participants