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

[Flight/Fizz] Use Constructors for Large Request/Response Objects in Flight/Fizz #29858

Merged
merged 1 commit into from
Jun 11, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jun 11, 2024

We know from Fiber that inline objects with more than 16 properties in V8 turn into dictionaries instead of optimized objects. The trick is to use a constructor instead of an inline object literal. I don't actually know if that's still the case or not. I haven't benchmarked/tested the output. Better safe than sorry.

It's unfortunate that this can have a negative effect for Hermes and JSC but it's not as bad as it is for V8 because they don't deopt into dictionaries. The time to construct these objects isn't a concern - the time to access them frequently is.

We have to beware the Task objects in Fizz. Those are currently on 16 fields exactly so we shouldn't add anymore ideally.

We should ideally have a lint rule against object literals with more than 16 fields on them. It might not help since sometimes the fields are conditional.

Copy link

vercel bot commented Jun 11, 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 Jun 11, 2024 4:09pm

@react-sizebot
Copy link

Comparing: a714685...47ac907

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 = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 497.44 kB 497.44 kB = 89.16 kB 89.16 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 502.26 kB 502.26 kB = 89.85 kB 89.85 kB
facebook-www/ReactDOM-prod.classic.js = 596.94 kB 596.94 kB = 105.24 kB 105.24 kB
facebook-www/ReactDOM-prod.modern.js = 571.12 kB 571.12 kB = 101.19 kB 101.19 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 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
oss-stable-rc/react-server/cjs/react-server-flight.production.js +0.68% 54.70 kB 55.07 kB +0.88% 11.01 kB 11.11 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js +0.68% 54.70 kB 55.07 kB +0.88% 11.01 kB 11.11 kB
oss-stable/react-server/cjs/react-server-flight.production.js +0.68% 54.70 kB 55.07 kB +0.88% 11.01 kB 11.11 kB
oss-experimental/react-server/cjs/react-server-flight.production.js +0.63% 58.78 kB 59.15 kB +0.80% 11.73 kB 11.82 kB
oss-stable-rc/react-client/cjs/react-client-flight.production.js +0.58% 47.24 kB 47.52 kB +0.23% 9.12 kB 9.14 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js +0.58% 47.24 kB 47.52 kB +0.23% 9.12 kB 9.14 kB
oss-stable/react-client/cjs/react-client-flight.production.js +0.58% 47.24 kB 47.52 kB +0.23% 9.12 kB 9.14 kB
oss-experimental/react-client/cjs/react-client-flight.production.js +0.58% 47.64 kB 47.92 kB +0.22% 9.17 kB 9.19 kB
oss-stable-rc/react-client/cjs/react-client-flight.development.js +0.52% 64.88 kB 65.22 kB +0.18% 12.23 kB 12.25 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +0.52% 64.88 kB 65.22 kB +0.18% 12.23 kB 12.25 kB
oss-stable/react-client/cjs/react-client-flight.development.js +0.52% 64.88 kB 65.22 kB +0.18% 12.23 kB 12.25 kB
oss-stable-rc/react-server/cjs/react-server.production.js +0.52% 105.49 kB 106.03 kB +0.23% 19.37 kB 19.41 kB
oss-stable-semver/react-server/cjs/react-server.production.js +0.52% 105.49 kB 106.03 kB +0.23% 19.37 kB 19.41 kB
oss-stable/react-server/cjs/react-server.production.js +0.52% 105.49 kB 106.03 kB +0.23% 19.37 kB 19.41 kB
oss-stable-rc/react-server/cjs/react-server-flight.development.js +0.49% 78.43 kB 78.81 kB +0.51% 14.59 kB 14.66 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +0.49% 78.43 kB 78.81 kB +0.51% 14.59 kB 14.66 kB
oss-stable/react-server/cjs/react-server-flight.development.js +0.49% 78.43 kB 78.81 kB +0.51% 14.59 kB 14.66 kB
oss-stable-rc/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.49% 73.23 kB 73.59 kB +0.21% 15.37 kB 15.41 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.49% 73.23 kB 73.59 kB +0.21% 15.37 kB 15.41 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.49% 73.23 kB 73.59 kB +0.21% 15.37 kB 15.41 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.49% 73.96 kB 74.32 kB +0.23% 15.48 kB 15.51 kB
oss-experimental/react-server/cjs/react-server.production.js +0.47% 116.00 kB 116.54 kB +0.22% 20.97 kB 21.02 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.46% 45.73 kB 45.94 kB +0.43% 9.48 kB 9.52 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.46% 45.73 kB 45.94 kB +0.43% 9.48 kB 9.52 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.46% 45.73 kB 45.94 kB +0.43% 9.48 kB 9.52 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.46% 46.07 kB 46.28 kB +0.44% 9.57 kB 9.62 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.46% 46.07 kB 46.28 kB +0.44% 9.57 kB 9.62 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.46% 46.07 kB 46.28 kB +0.44% 9.57 kB 9.62 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.45% 46.22 kB 46.43 kB +0.43% 9.55 kB 9.59 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.45% 46.55 kB 46.76 kB +0.45% 9.64 kB 9.68 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +0.45% 73.17 kB 73.50 kB +0.26% 14.04 kB 14.08 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +0.43% 90.35 kB 90.73 kB +0.48% 16.78 kB 16.86 kB
oss-stable-rc/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.41% 91.05 kB 91.42 kB +0.16% 19.90 kB 19.93 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.41% 91.05 kB 91.42 kB +0.16% 19.90 kB 19.93 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.41% 91.05 kB 91.42 kB +0.16% 19.90 kB 19.93 kB
oss-stable-rc/react-server/cjs/react-server.development.js +0.39% 154.79 kB 155.39 kB +0.18% 28.31 kB 28.36 kB
oss-stable-semver/react-server/cjs/react-server.development.js +0.39% 154.79 kB 155.39 kB +0.18% 28.31 kB 28.36 kB
oss-stable/react-server/cjs/react-server.development.js +0.39% 154.79 kB 155.39 kB +0.18% 28.31 kB 28.36 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.36% 103.03 kB 103.41 kB +0.15% 23.10 kB 23.13 kB
oss-experimental/react-server/cjs/react-server.development.js +0.36% 167.30 kB 167.90 kB +0.16% 30.20 kB 30.25 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.36% 44.19 kB 44.35 kB +0.36% 9.12 kB 9.16 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.36% 44.19 kB 44.35 kB +0.36% 9.12 kB 9.16 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.36% 44.19 kB 44.35 kB +0.36% 9.12 kB 9.16 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.35% 44.68 kB 44.83 kB +0.38% 9.19 kB 9.23 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.33% 208.47 kB 209.16 kB +0.35% 38.80 kB 38.94 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.32% 66.34 kB 66.55 kB +0.43% 12.38 kB 12.43 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.32% 66.34 kB 66.55 kB +0.43% 12.38 kB 12.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.32% 66.34 kB 66.55 kB +0.43% 12.38 kB 12.43 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.32% 66.79 kB 67.00 kB +0.42% 12.49 kB 12.54 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.32% 66.79 kB 67.00 kB +0.42% 12.49 kB 12.54 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.32% 66.79 kB 67.00 kB +0.42% 12.49 kB 12.54 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.27% 74.59 kB 74.79 kB +0.41% 14.32 kB 14.37 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.27% 75.04 kB 75.24 kB +0.44% 14.44 kB 14.50 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.27% 341.92 kB 342.83 kB +0.25% 62.20 kB 62.36 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.25% 196.94 kB 197.43 kB +0.13% 36.41 kB 36.46 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.25% 196.94 kB 197.43 kB +0.13% 36.41 kB 36.46 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.25% 196.96 kB 197.45 kB +0.13% 36.43 kB 36.48 kB
oss-stable-rc/react-dom/cjs/react-dom-server.bun.production.js +0.25% 200.81 kB 201.31 kB +0.13% 37.46 kB 37.51 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.js +0.25% 200.81 kB 201.31 kB +0.13% 37.46 kB 37.51 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.js +0.25% 200.88 kB 201.37 kB +0.13% 37.49 kB 37.53 kB
oss-stable-rc/react-dom/cjs/react-dom-server-legacy.node.production.js +0.25% 201.37 kB 201.87 kB +0.13% 38.15 kB 38.20 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.js +0.25% 201.37 kB 201.87 kB +0.13% 38.15 kB 38.20 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.js +0.25% 201.40 kB 201.89 kB +0.13% 38.17 kB 38.22 kB
facebook-www/ReactDOMServer-prod.modern.js +0.24% 204.41 kB 204.90 kB +0.15% 37.45 kB 37.51 kB
facebook-www/ReactDOMServer-prod.classic.js +0.24% 205.06 kB 205.56 kB +0.14% 37.66 kB 37.71 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.23% 211.49 kB 211.98 kB +0.14% 38.40 kB 38.46 kB
oss-stable-rc/react-dom/cjs/react-dom-server.browser.production.js +0.23% 212.16 kB 212.66 kB +0.11% 38.69 kB 38.73 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.js +0.23% 212.16 kB 212.66 kB +0.11% 38.69 kB 38.73 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.js +0.23% 212.23 kB 212.73 kB +0.11% 38.71 kB 38.76 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.js +0.23% 216.48 kB 216.98 kB +0.15% 40.25 kB 40.31 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.js +0.23% 217.03 kB 217.53 kB +0.14% 39.60 kB 39.66 kB
oss-stable-rc/react-dom/cjs/react-dom-server.edge.production.js +0.23% 217.03 kB 217.53 kB +0.12% 40.51 kB 40.56 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.js +0.23% 217.03 kB 217.53 kB +0.12% 40.51 kB 40.56 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.js +0.23% 217.10 kB 217.60 kB +0.13% 40.53 kB 40.58 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.23% 64.56 kB 64.71 kB +0.36% 12.00 kB 12.04 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.23% 64.56 kB 64.71 kB +0.36% 12.00 kB 12.04 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.23% 64.56 kB 64.71 kB +0.36% 12.00 kB 12.04 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.js +0.21% 236.70 kB 237.20 kB +0.33% 41.53 kB 41.67 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.js +0.20% 242.12 kB 242.62 kB +0.32% 43.48 kB 43.62 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 kB 0.00 kB

Generated by 🚫 dangerJS against 47ac907

@sebmarkbage sebmarkbage merged commit 01a4057 into facebook:main Jun 11, 2024
44 checks passed
github-actions bot pushed a commit that referenced this pull request Jun 11, 2024
…Flight/Fizz (#29858)

We know from Fiber that inline objects with more than 16 properties in
V8 turn into dictionaries instead of optimized objects. The trick is to
use a constructor instead of an inline object literal. I don't actually
know if that's still the case or not. I haven't benchmarked/tested the
output. Better safe than sorry.

It's unfortunate that this can have a negative effect for Hermes and JSC
but it's not as bad as it is for V8 because they don't deopt into
dictionaries. The time to construct these objects isn't a concern - the
time to access them frequently is.

We have to beware the Task objects in Fizz. Those are currently on 16
fields exactly so we shouldn't add anymore ideally.

We should ideally have a lint rule against object literals with more
than 16 fields on them. It might not help since sometimes the fields are
conditional.

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