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] Reuse rootSegmentID as the SuspenseBoundaryID #27387

Merged
merged 1 commit into from
Sep 18, 2023

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Sep 18, 2023

Originally the intension was to have React assign an ID to a user rendered DOM node inside a fallback while it was loading. If there already were an explicit id defined on the DOM element we would reuse that one instead. That's why this was a DOM Config option and not just built in to Fizz.

This became tricky since it can load late and so we'd have to transfer it down and detect it only once it finished rendering and if there is no DOM element it doesn't work anyway. So instead, what we do in practice is to always use a <template> tag with the ID. This has the downside of an extra useless node and shifting child CSS selectors.

Maybe we'll get around to fixing this properly but it might not be worth it.

This PR just gets rid of the SuspenseBoundaryID concept and instead we just use the same ID number as the root segment ID of the boundary to refer to the boundary to simplify the implementation.

This also solves the problem that SuspenseBoundaryID isn't currently serializable (although that's easily fixable by itself if necessary).

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 18, 2023
@react-sizebot
Copy link

react-sizebot commented Sep 18, 2023

Comparing: 925c66a...7a3d677

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 = 166.62 kB 166.62 kB = 52.13 kB 52.13 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 176.05 kB 176.05 kB = 54.97 kB 54.97 kB
facebook-www/ReactDOM-prod.classic.js = 571.73 kB 571.73 kB = 100.64 kB 100.64 kB
facebook-www/ReactDOM-prod.modern.js = 555.46 kB 555.46 kB = 97.75 kB 97.75 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServer-dev.classic.js = 394.64 kB 393.85 kB = 85.31 kB 85.09 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js = 75.52 kB 75.37 kB +0.14% 22.85 kB 22.88 kB
facebook-www/ReactDOMServer-dev.modern.js = 387.21 kB 386.42 kB = 83.66 kB 83.45 kB
facebook-www/ReactDOMServer-prod.classic.js = 179.27 kB 178.90 kB +0.19% 31.57 kB 31.63 kB
facebook-www/ReactDOMServer-prod.modern.js = 178.33 kB 177.97 kB +0.18% 31.32 kB 31.38 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js = 382.41 kB 381.61 kB = 82.51 kB 82.29 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js = 419.86 kB 418.87 kB = 87.78 kB 87.51 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js = 402.04 kB 401.08 kB = 87.09 kB 86.81 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js = 401.15 kB 400.20 kB = 86.89 kB 86.61 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js = 400.74 kB 399.79 kB = 86.77 kB 86.49 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js = 413.71 kB 412.72 kB = 87.04 kB 86.77 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js = 396.80 kB 395.84 kB = 86.48 kB 86.20 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js = 394.89 kB 393.93 kB = 86.02 kB 85.74 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js = 392.38 kB 391.43 kB = 85.59 kB 85.31 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 74.17 kB 73.97 kB +0.09% 22.12 kB 22.14 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 74.14 kB 73.95 kB +0.09% 22.09 kB 22.11 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js = 182.27 kB 181.80 kB +0.08% 32.58 kB 32.61 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js = 74.50 kB 74.29 kB +0.06% 22.84 kB 22.85 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js = 74.47 kB 74.26 kB +0.06% 22.81 kB 22.82 kB
oss-stable-semver/react-server/cjs/react-server.development.js = 184.30 kB 183.78 kB = 41.99 kB 41.85 kB
oss-stable/react-server/cjs/react-server.development.js = 184.30 kB 183.78 kB = 41.99 kB 41.85 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js = 74.56 kB 74.34 kB +0.10% 22.90 kB 22.92 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js = 74.53 kB 74.31 kB +0.09% 22.87 kB 22.89 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js = 72.62 kB 72.40 kB +0.08% 21.84 kB 21.86 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js = 72.59 kB 72.38 kB +0.07% 21.82 kB 21.83 kB
oss-experimental/react-server/cjs/react-server.development.js = 200.91 kB 200.27 kB = 45.82 kB 45.65 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 78.78 kB 78.52 kB +0.06% 23.61 kB 23.63 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js = 80.98 kB 80.71 kB +0.05% 24.51 kB 24.52 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js = 81.25 kB 80.97 kB +0.06% 24.68 kB 24.70 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js = 77.23 kB 76.95 kB +0.09% 23.31 kB 23.33 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js = 34.06 kB 33.92 kB +0.09% 10.67 kB 10.68 kB
oss-stable/react-server/cjs/react-server.production.min.js = 34.06 kB 33.92 kB +0.09% 10.67 kB 10.68 kB
oss-experimental/react-server/cjs/react-server.production.min.js = 37.14 kB 36.95 kB +0.08% 11.56 kB 11.57 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.development.js = 6.42 kB 6.22 kB = 1.79 kB 1.70 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js = 3.19 kB 3.08 kB = 1.22 kB 1.15 kB

Generated by 🚫 dangerJS against 7a3d677

@sebmarkbage sebmarkbage merged commit 2807d78 into facebook:main Sep 18, 2023
github-actions bot pushed a commit that referenced this pull request Sep 18, 2023
Originally the intension was to have React assign an ID to a user
rendered DOM node inside a `fallback` while it was loading. If there
already were an explicit `id` defined on the DOM element we would reuse
that one instead. That's why this was a DOM Config option and not just
built in to Fizz.

This became tricky since it can load late and so we'd have to transfer
it down and detect it only once it finished rendering and if there is no
DOM element it doesn't work anyway. So instead, what we do in practice
is to always use a `<template>` tag with the ID. This has the downside
of an extra useless node and shifting child CSS selectors.

Maybe we'll get around to fixing this properly but it might not be worth
it.

This PR just gets rid of the SuspenseBoundaryID concept and instead we
just use the same ID number as the root segment ID of the boundary to
refer to the boundary to simplify the implementation.

This also solves the problem that SuspenseBoundaryID isn't currently
serializable (although that's easily fixable by itself if necessary).

DiffTrain build for [2807d78](2807d78)
kodiakhq bot pushed a commit to vercel/next.js that referenced this pull request Sep 20, 2023
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Originally the intension was to have React assign an ID to a user
rendered DOM node inside a `fallback` while it was loading. If there
already were an explicit `id` defined on the DOM element we would reuse
that one instead. That's why this was a DOM Config option and not just
built in to Fizz.

This became tricky since it can load late and so we'd have to transfer
it down and detect it only once it finished rendering and if there is no
DOM element it doesn't work anyway. So instead, what we do in practice
is to always use a `<template>` tag with the ID. This has the downside
of an extra useless node and shifting child CSS selectors.

Maybe we'll get around to fixing this properly but it might not be worth
it.

This PR just gets rid of the SuspenseBoundaryID concept and instead we
just use the same ID number as the root segment ID of the boundary to
refer to the boundary to simplify the implementation.

This also solves the problem that SuspenseBoundaryID isn't currently
serializable (although that's easily fixable by itself if necessary).
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Originally the intension was to have React assign an ID to a user
rendered DOM node inside a `fallback` while it was loading. If there
already were an explicit `id` defined on the DOM element we would reuse
that one instead. That's why this was a DOM Config option and not just
built in to Fizz.

This became tricky since it can load late and so we'd have to transfer
it down and detect it only once it finished rendering and if there is no
DOM element it doesn't work anyway. So instead, what we do in practice
is to always use a `<template>` tag with the ID. This has the downside
of an extra useless node and shifting child CSS selectors.

Maybe we'll get around to fixing this properly but it might not be worth
it.

This PR just gets rid of the SuspenseBoundaryID concept and instead we
just use the same ID number as the root segment ID of the boundary to
refer to the boundary to simplify the implementation.

This also solves the problem that SuspenseBoundaryID isn't currently
serializable (although that's easily fixable by itself if necessary).

DiffTrain build for commit 2807d78.
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