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

[Fizz] Allow aborting during render #30488

Merged
merged 1 commit into from
Jul 29, 2024

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Jul 26, 2024

Currently if you abort a Fizz render during rendering the render will not complete correctly because there are inconsistencies with task counting. This change updates the abort implementation to allow you to abort from within a render itself. We already landed a similar change for Flight in #29764

Copy link

vercel bot commented Jul 26, 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 Jul 29, 2024 6:15pm

@react-sizebot
Copy link

react-sizebot commented Jul 26, 2024

Comparing: 9938e24...406f287

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.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 501.46 kB 501.46 kB = 89.98 kB 89.98 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 506.28 kB 506.28 kB = 90.68 kB 90.68 kB
facebook-www/ReactDOM-prod.classic.js = 601.27 kB 601.27 kB = 106.28 kB 106.28 kB
facebook-www/ReactDOM-prod.modern.js = 577.38 kB 577.38 kB = 102.52 kB 102.52 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-html/cjs/react-html.production.js +0.66% 201.14 kB 202.46 kB +0.41% 37.94 kB 38.09 kB
oss-experimental/react-server/cjs/react-server.production.js +0.64% 116.86 kB 117.60 kB +0.52% 21.10 kB 21.21 kB
oss-stable-rc/react-server/cjs/react-server.production.js +0.62% 106.53 kB 107.19 kB +0.51% 19.57 kB 19.67 kB
oss-stable-semver/react-server/cjs/react-server.production.js +0.62% 106.53 kB 107.19 kB +0.51% 19.57 kB 19.67 kB
oss-stable/react-server/cjs/react-server.production.js +0.62% 106.53 kB 107.19 kB +0.51% 19.57 kB 19.67 kB
facebook-www/ReactDOMServer-prod.classic.js +0.59% 209.25 kB 210.49 kB +0.32% 38.27 kB 38.39 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.57% 211.06 kB 212.25 kB +0.64% 39.42 kB 39.67 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.51% 199.15 kB 200.16 kB +0.35% 36.84 kB 36.97 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.51% 199.15 kB 200.16 kB +0.35% 36.84 kB 36.97 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.51% 199.17 kB 200.18 kB +0.34% 36.87 kB 36.99 kB
oss-stable-rc/react-dom/cjs/react-dom-server.bun.production.js +0.50% 203.15 kB 204.17 kB +0.36% 37.98 kB 38.11 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.js +0.50% 203.15 kB 204.17 kB +0.36% 37.98 kB 38.11 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.js +0.50% 203.22 kB 204.23 kB +0.36% 38.00 kB 38.13 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.node.production.js +0.50% 203.54 kB 204.56 kB +0.34% 38.58 kB 38.71 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.js +0.50% 203.54 kB 204.56 kB +0.34% 38.58 kB 38.71 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.js +0.50% 203.56 kB 204.58 kB +0.34% 38.60 kB 38.73 kB
facebook-www/ReactDOMServer-prod.modern.js +0.49% 206.84 kB 207.86 kB +0.31% 37.92 kB 38.04 kB
oss-stable-rc/react-dom/cjs/react-dom-server.node.production.js +0.47% 215.37 kB 216.39 kB +0.37% 39.78 kB 39.93 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.js +0.47% 215.37 kB 216.39 kB +0.37% 39.78 kB 39.93 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.js +0.47% 215.43 kB 216.45 kB +0.37% 39.80 kB 39.95 kB
oss-stable-rc/react-dom/cjs/react-dom-server.browser.production.js +0.47% 214.65 kB 215.66 kB +0.32% 39.17 kB 39.30 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.js +0.47% 214.65 kB 215.66 kB +0.32% 39.17 kB 39.30 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.js +0.47% 214.71 kB 215.72 kB +0.32% 39.20 kB 39.32 kB
oss-stable-rc/react-dom/cjs/react-dom-server.edge.production.js +0.46% 219.52 kB 220.54 kB +0.33% 41.04 kB 41.18 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.js +0.46% 219.52 kB 220.54 kB +0.33% 41.04 kB 41.18 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.js +0.46% 219.59 kB 220.60 kB +0.33% 41.07 kB 41.20 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.45% 213.42 kB 214.38 kB +0.29% 38.84 kB 38.96 kB
oss-experimental/react-html/cjs/react-html.react-server.production.js +0.45% 297.55 kB 298.88 kB +0.27% 56.36 kB 56.52 kB
oss-stable-rc/react-dom/cjs/react-dom-server.bun.development.js +0.44% 305.51 kB 306.86 kB +0.24% 60.00 kB 60.15 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js +0.44% 305.51 kB 306.86 kB +0.24% 60.00 kB 60.15 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js +0.44% 305.57 kB 306.93 kB +0.25% 60.03 kB 60.18 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.js +0.44% 218.37 kB 219.33 kB +0.30% 40.69 kB 40.81 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.js +0.44% 219.08 kB 220.05 kB +0.31% 40.10 kB 40.23 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.node.development.js +0.43% 343.26 kB 344.75 kB +0.26% 63.06 kB 63.23 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.43% 343.26 kB 344.75 kB +0.26% 63.06 kB 63.23 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.43% 343.26 kB 344.75 kB +0.26% 63.06 kB 63.23 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.43% 343.26 kB 344.75 kB +0.26% 63.06 kB 63.23 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.43% 343.28 kB 344.77 kB +0.26% 63.08 kB 63.25 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.43% 343.28 kB 344.77 kB +0.26% 63.08 kB 63.25 kB
oss-stable-rc/react-dom/cjs/react-dom-server.node.development.js +0.43% 350.13 kB 351.62 kB +0.27% 63.64 kB 63.81 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.43% 350.13 kB 351.62 kB +0.27% 63.64 kB 63.81 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.43% 350.19 kB 351.69 kB +0.27% 63.66 kB 63.83 kB
oss-stable-rc/react-dom/cjs/react-dom-server.browser.development.js +0.42% 355.02 kB 356.52 kB +0.29% 64.95 kB 65.14 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.42% 355.02 kB 356.52 kB +0.29% 64.95 kB 65.14 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.42% 355.08 kB 356.59 kB +0.29% 64.98 kB 65.16 kB
oss-stable-rc/react-dom/cjs/react-dom-server.edge.development.js +0.42% 355.57 kB 357.07 kB +0.30% 65.05 kB 65.24 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js +0.42% 355.57 kB 357.07 kB +0.30% 65.05 kB 65.24 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js +0.42% 355.63 kB 357.13 kB +0.30% 65.08 kB 65.27 kB
facebook-www/ReactDOMServer-dev.classic.js +0.41% 360.06 kB 361.54 kB +0.24% 65.46 kB 65.62 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.js +0.40% 240.28 kB 241.25 kB +0.33% 43.33 kB 43.47 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.js +0.40% 238.91 kB 239.88 kB +0.27% 42.11 kB 42.22 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.js +0.40% 244.34 kB 245.31 kB +0.30% 44.07 kB 44.21 kB
facebook-www/ReactDOMServer-dev.modern.js +0.37% 353.20 kB 354.53 kB +0.25% 64.40 kB 64.56 kB
oss-stable-rc/react-server/cjs/react-server.development.js +0.33% 154.66 kB 155.17 kB +0.28% 28.41 kB 28.49 kB
oss-stable-semver/react-server/cjs/react-server.development.js +0.33% 154.66 kB 155.17 kB +0.28% 28.41 kB 28.49 kB
oss-stable/react-server/cjs/react-server.development.js +0.33% 154.66 kB 155.17 kB +0.28% 28.41 kB 28.49 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js +0.32% 328.79 kB 329.85 kB +0.28% 63.22 kB 63.39 kB
oss-experimental/react-html/cjs/react-html.development.js +0.32% 339.88 kB 340.98 kB +0.27% 62.09 kB 62.26 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.32% 368.41 kB 369.58 kB +0.28% 66.34 kB 66.52 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.32% 368.41 kB 369.58 kB +0.28% 66.34 kB 66.52 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.31% 390.95 kB 392.14 kB +0.29% 68.98 kB 69.18 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js +0.31% 391.49 kB 392.69 kB +0.30% 69.08 kB 69.28 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.30% 386.41 kB 387.59 kB +0.29% 68.50 kB 68.71 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.28% 345.30 kB 346.27 kB +0.15% 63.21 kB 63.30 kB
oss-experimental/react-html/cjs/react-html.react-server.development.js +0.23% 492.71 kB 493.84 kB +0.19% 88.79 kB 88.96 kB

Generated by 🚫 dangerJS against fb0bd66

__DEV__ && enableOwnerStacks ? task.debugTask : null,
);

if (x === AbortSigil) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

If we abort sync in a resume, this can happen too right? Therefore you need to handle the same thing in retryReplayTask.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

@@ -1580,6 +1601,13 @@ function finishClassComponent(
nextChildren = instance.render();
}

if (request.status === ABORTING) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

There are so many places we need to check this for Fizz so I think maybe we should just put it after everywhere we call retryNode:

https://github.com/facebook/react/blob/main/packages/react-server/src/ReactFizzServer.js#L2516

Or maybe at least before every return inside retryNode that might have user space code in it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

discussed offline. This is tricky b/c we can end up aborting too high. For now we'll just support the obvious places where user code can run like function and class components and lazy initializers. We can revisit and expand support to iterables and other places if we find a strong motivation in the future. The use case for aborting in these other places is a bit esoteric

Currently if you abort a Fizz render during rendering the render will not complete correctly because there are inconsistencies with task counting. This change updates the abort implementation to allow you to abort from within a render itself. We already landed a similar change for Flight in facebook#29764
@gnoff gnoff merged commit a451de0 into facebook:main Jul 29, 2024
185 checks passed
@gnoff gnoff deleted the fizz-allow-abort-during-render branch July 29, 2024 20:18
github-actions bot pushed a commit that referenced this pull request Jul 29, 2024
Currently if you abort a Fizz render during rendering the render will
not complete correctly because there are inconsistencies with task
counting. This change updates the abort implementation to allow you to
abort from within a render itself. We already landed a similar change
for Flight in #29764

DiffTrain build for [a451de0](a451de0)
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