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

[Fiber] render boundary in fallback if it contains a new stylesheet during sync update #28965

Merged
merged 1 commit into from
May 21, 2024

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented May 1, 2024

Updates Suspensey instances and resources to preload even during urgent updates and to potentially suspend.

The current implementation is unchanged for transitions but for sync updates if there is a suspense boundary above the resource/instance it will be rendered in fallback mode instead.

Note: This behavior is not what we want for images once we make them suspense enabled. We will need to have forked behavior here to distinguish between stylesheets which should never commit when not loaded and images which should commit after a small delay

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 1, 2024
@react-sizebot
Copy link

react-sizebot commented May 1, 2024

Comparing: 0a0a5c0...8839e50

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.js = 6.66 kB 6.66 kB +0.11% 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.04% 495.71 kB 495.89 kB +0.05% 88.78 kB 88.83 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.04% 500.51 kB 500.69 kB +0.04% 89.47 kB 89.51 kB
facebook-www/ReactDOM-prod.classic.js +0.03% 592.86 kB 593.05 kB +0.04% 104.28 kB 104.32 kB
facebook-www/ReactDOM-prod.modern.js +0.03% 569.08 kB 569.27 kB +0.02% 100.69 kB 100.72 kB
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Generated by 🚫 dangerJS against 8839e50

workInProgress.flags |= ShouldSuspendCommit;
} else {
const rootRenderLanes = getWorkInProgressRootRenderLanes();
if (!includesOnlyNonUrgentLanes(rootRenderLanes) && required) {
Copy link
Collaborator

@acdlite acdlite May 10, 2024

Choose a reason for hiding this comment

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

I don't really like introducing this concept of required and not-required resources. It also only gets read when you're rendering a new tree, not during an update; when you rendering a new tree, it's pretty much always fine to show a fallback, even if the render is synchronous.

The case where you might want to distinguish between "required" and "not required" resources is during a sync update, when the choice is between a stale resource or replacing the existing UI with a fallback (bad).

But that can be modeled during the waitForCommitToBeReady phase by effectively assigning this resource a timeout of 0. I think that's the better strategy.

@gnoff gnoff force-pushed the suspend-boundary-on-sync-stylesheet branch from da0b480 to 946168d Compare May 10, 2024 23:58
@gnoff gnoff force-pushed the suspend-boundary-on-sync-stylesheet branch from 946168d to af03a72 Compare May 20, 2024 20:38
Copy link

vercel bot commented May 20, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 21, 2024 10:56pm

…uring sync update

When we implemented Suspensey CSS we had a heuristic that if the update was sync we would ignore the loading states of any new stylesheets and just do the commit. But for a stylesheet capability to be useful it needs to reliably prevent FOUC and since the stylesheet api is opt-in through precedence we don't have to maintain backaward compat (old stylesheets do not block commit but then nobody really renders them because of FOUC anyway)

This update modifies the logic to put a boundary back into fallback if a sync update would lead to a stylesheet commiting before it loaded.
@gnoff gnoff force-pushed the suspend-boundary-on-sync-stylesheet branch from 3cf4ab1 to 8839e50 Compare May 21, 2024 22:54
@gnoff gnoff merged commit 217b2cc into facebook:main May 21, 2024
40 checks passed
@gnoff gnoff deleted the suspend-boundary-on-sync-stylesheet branch May 21, 2024 23:03
github-actions bot pushed a commit that referenced this pull request May 21, 2024
…uring sync update (#28965)

Updates Suspensey instances and resources to preload even during urgent
updates and to potentially suspend.

The current implementation is unchanged for transitions but for sync
updates if there is a suspense boundary above the resource/instance it
will be rendered in fallback mode instead.

Note: This behavior is not what we want for images once we make them
suspense enabled. We will need to have forked behavior here to
distinguish between stylesheets which should never commit when not
loaded and images which should commit after a small delay

DiffTrain build for commit 217b2cc.
github-actions bot pushed a commit that referenced this pull request May 21, 2024
…uring sync update (#28965)

Updates Suspensey instances and resources to preload even during urgent
updates and to potentially suspend.

The current implementation is unchanged for transitions but for sync
updates if there is a suspense boundary above the resource/instance it
will be rendered in fallback mode instead.

Note: This behavior is not what we want for images once we make them
suspense enabled. We will need to have forked behavior here to
distinguish between stylesheets which should never commit when not
loaded and images which should commit after a small delay

DiffTrain build for [217b2cc](217b2cc)
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.

4 participants