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] Unify plain Server Component and forwardRef under one function #28261

Merged
merged 1 commit into from
Feb 7, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Feb 6, 2024

This used to be trivial but it's no longer trivial.

In Fizz and Fiber this is split into renderWithHooks and finishFunctionComponent since they also support indeterminate components.

Interestingly thanks to this unification we always call functions with an arity of 2 which is a bit weird - with the second argument being undefined in everything except forwardRef and legacy context consumers.

This makes Flight makes the same thing but we could also call it with an arity of 1.

Since Flight errors early if you try to pass it a ref, and there's no legacy context, the second arg is always undefined.

The practical change in this PR is that returning a Promise from a forwardRef now turns it into a lazy. We previously didn't support async forwardRef since it wasn't supported on the client. However, since eventually this will be supported by child-as-a-promise it seems fine to support it.

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

Comparing: 0d11563...8da98fa

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 = 176.66 kB 176.66 kB = 55.01 kB 55.01 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.65 kB 178.65 kB = 55.59 kB 55.59 kB
facebook-www/ReactDOM-prod.classic.js = 591.78 kB 591.78 kB = 104.44 kB 104.44 kB
facebook-www/ReactDOM-prod.modern.js = 575.53 kB 575.53 kB = 101.54 kB 101.54 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js = 57.54 kB 56.34 kB = 13.80 kB 13.74 kB
oss-stable/react-server/cjs/react-server-flight.production.js = 57.54 kB 56.34 kB = 13.80 kB 13.74 kB
test_utils/ReactAllWarnings.js Deleted 67.02 kB 0.00 kB Deleted 16.42 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-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 30.94 kB 30.78 kB = 10.35 kB 10.34 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 30.43 kB 30.28 kB = 10.19 kB 10.17 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 30.13 kB 29.98 kB = 10.15 kB 10.14 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 29.63 kB 29.48 kB = 10.00 kB 9.98 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 29.51 kB 29.36 kB = 9.86 kB 9.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 29.13 kB 28.98 kB = 9.74 kB 9.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 28.54 kB 28.39 kB = 9.69 kB 9.68 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 28.54 kB 28.39 kB = 9.69 kB 9.68 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 28.88 kB 28.73 kB = 9.71 kB 9.69 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 29.23 kB 29.08 kB = 9.84 kB 9.81 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 28.38 kB 28.23 kB = 9.56 kB 9.54 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 28.03 kB 27.88 kB = 9.53 kB 9.51 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 28.03 kB 27.88 kB = 9.53 kB 9.51 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 28.50 kB 28.35 kB = 9.62 kB 9.59 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 27.73 kB 27.58 kB = 9.49 kB 9.47 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 27.73 kB 27.58 kB = 9.49 kB 9.47 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 27.24 kB 27.09 kB = 9.34 kB 9.32 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 27.24 kB 27.09 kB = 9.34 kB 9.32 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 27.59 kB 27.44 kB = 9.44 kB 9.42 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 27.06 kB 26.91 kB = 9.18 kB 9.16 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 27.06 kB 26.91 kB = 9.18 kB 9.16 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 26.78 kB 26.62 kB = 9.17 kB 9.14 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 26.78 kB 26.62 kB = 9.17 kB 9.14 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 26.68 kB 26.53 kB = 9.07 kB 9.05 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 26.68 kB 26.53 kB = 9.07 kB 9.05 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 26.43 kB 26.27 kB = 9.03 kB 9.01 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 26.43 kB 26.27 kB = 9.03 kB 9.01 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 26.04 kB 25.89 kB = 8.95 kB 8.93 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 26.04 kB 25.89 kB = 8.95 kB 8.93 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 25.93 kB 25.78 kB = 8.87 kB 8.86 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 25.93 kB 25.78 kB = 8.87 kB 8.86 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 25.20 kB 25.05 kB = 8.78 kB 8.76 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 25.20 kB 25.05 kB = 8.78 kB 8.76 kB
oss-experimental/react-server/cjs/react-server-flight.production.min.js = 18.48 kB 18.33 kB = 6.60 kB 6.59 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.min.js = 16.13 kB 15.98 kB = 5.95 kB 5.93 kB
oss-stable/react-server/cjs/react-server-flight.production.min.js = 16.13 kB 15.98 kB = 5.95 kB 5.93 kB
facebook-www/ReactFlightDOMServer-prod.modern.js = 38.69 kB 38.32 kB = 8.76 kB 8.72 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 120.74 kB 119.53 kB = 28.53 kB 28.44 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 118.32 kB 117.11 kB = 27.86 kB 27.76 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 118.11 kB 116.89 kB = 27.64 kB 27.55 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 121.23 kB 119.98 kB = 27.65 kB 27.57 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 115.79 kB 114.57 kB = 27.58 kB 27.49 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js = 115.68 kB 114.47 kB = 27.03 kB 26.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 114.93 kB 113.71 kB = 27.31 kB 27.22 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js = 118.51 kB 117.26 kB = 26.91 kB 26.84 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 113.72 kB 112.51 kB = 27.03 kB 26.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 111.32 kB 110.12 kB = 26.12 kB 26.07 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 112.34 kB 111.13 kB = 26.60 kB 26.51 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 108.91 kB 107.71 kB = 25.44 kB 25.40 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 110.27 kB 109.06 kB = 25.81 kB 25.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 110.16 kB 108.95 kB = 26.22 kB 26.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 110.16 kB 108.95 kB = 26.22 kB 26.10 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 108.66 kB 107.46 kB = 25.22 kB 25.18 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 107.74 kB 106.53 kB = 25.56 kB 25.45 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 107.74 kB 106.53 kB = 25.56 kB 25.45 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js = 106.25 kB 105.05 kB = 24.61 kB 24.57 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 107.53 kB 106.31 kB = 25.34 kB 25.22 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 107.53 kB 106.31 kB = 25.34 kB 25.22 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 106.08 kB 104.88 kB = 25.16 kB 25.12 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 105.94 kB 104.74 kB = 25.12 kB 25.07 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 110.40 kB 109.15 kB = 25.36 kB 25.29 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 110.40 kB 109.15 kB = 25.36 kB 25.29 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 104.02 kB 102.82 kB = 24.59 kB 24.55 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js = 105.10 kB 103.89 kB = 24.73 kB 24.61 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js = 105.10 kB 103.89 kB = 24.73 kB 24.61 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 104.73 kB 103.52 kB = 25.10 kB 24.99 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 104.73 kB 103.52 kB = 25.10 kB 24.99 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 103.36 kB 102.16 kB = 24.39 kB 24.34 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 104.55 kB 103.34 kB = 25.07 kB 24.96 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 104.55 kB 103.34 kB = 25.07 kB 24.96 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js = 107.67 kB 106.42 kB = 24.63 kB 24.56 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js = 107.67 kB 106.42 kB = 24.63 kB 24.56 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 101.41 kB 100.22 kB = 24.06 kB 24.00 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js = 101.41 kB 100.22 kB = 24.06 kB 24.00 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 102.67 kB 101.45 kB = 24.55 kB 24.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 102.67 kB 101.45 kB = 24.55 kB 24.43 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 100.85 kB 99.65 kB = 23.39 kB 23.34 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 101.97 kB 100.75 kB = 24.35 kB 24.23 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 101.97 kB 100.75 kB = 24.35 kB 24.23 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 99.01 kB 97.81 kB = 23.39 kB 23.33 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js = 99.01 kB 97.81 kB = 23.39 kB 23.33 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 98.76 kB 97.56 kB = 23.17 kB 23.11 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js = 98.76 kB 97.56 kB = 23.17 kB 23.11 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 99.69 kB 98.48 kB = 23.51 kB 23.40 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 99.69 kB 98.48 kB = 23.51 kB 23.40 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js = 96.34 kB 95.14 kB = 22.55 kB 22.49 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js = 96.34 kB 95.14 kB = 22.55 kB 22.49 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 95.73 kB 94.53 kB = 22.93 kB 22.86 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js = 95.73 kB 94.53 kB = 22.93 kB 22.86 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 95.59 kB 94.39 kB = 22.89 kB 22.82 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js = 95.59 kB 94.39 kB = 22.89 kB 22.82 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 93.67 kB 92.47 kB = 22.37 kB 22.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js = 93.67 kB 92.47 kB = 22.37 kB 22.30 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 93.01 kB 91.81 kB = 22.17 kB 22.09 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js = 93.01 kB 91.81 kB = 22.17 kB 22.09 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 90.94 kB 89.74 kB = 21.33 kB 21.27 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js = 90.94 kB 89.74 kB = 21.33 kB 21.27 kB
facebook-www/ReactFlightDOMServer-dev.modern.js = 83.24 kB 81.98 kB = 17.75 kB 17.67 kB
oss-experimental/react-server/cjs/react-server-flight.development.js = 75.23 kB 74.01 kB = 17.70 kB 17.61 kB
oss-experimental/react-server/cjs/react-server-flight.production.js = 67.21 kB 66.01 kB = 15.78 kB 15.72 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js = 65.53 kB 64.31 kB = 15.73 kB 15.61 kB
oss-stable/react-server/cjs/react-server-flight.development.js = 65.53 kB 64.31 kB = 15.73 kB 15.61 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js = 57.54 kB 56.34 kB = 13.80 kB 13.74 kB
oss-stable/react-server/cjs/react-server-flight.production.js = 57.54 kB 56.34 kB = 13.80 kB 13.74 kB
test_utils/ReactAllWarnings.js Deleted 67.02 kB 0.00 kB Deleted 16.42 kB 0.00 kB

Generated by 🚫 dangerJS against 8da98fa

@sebmarkbage sebmarkbage merged commit f07ac1e into facebook:main Feb 7, 2024
36 checks passed
github-actions bot pushed a commit that referenced this pull request Feb 7, 2024
…on (#28261)

This used to be trivial but it's no longer trivial.

In Fizz and Fiber this is split into renderWithHooks and
finishFunctionComponent since they also support indeterminate
components.

Interestingly thanks to this unification we always call functions with
an arity of 2 which is a bit weird - with the second argument being
undefined in everything except forwardRef and legacy context consumers.

This makes Flight makes the same thing but we could also call it with an
arity of 1.

Since Flight errors early if you try to pass it a ref, and there's no
legacy context, the second arg is always undefined.

The practical change in this PR is that returning a Promise from a
forwardRef now turns it into a lazy. We previously didn't support async
forwardRef since it wasn't supported on the client. However, since
eventually this will be supported by child-as-a-promise it seems fine to
support it.

DiffTrain build for [f07ac1e](f07ac1e)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…on (facebook#28261)

This used to be trivial but it's no longer trivial.

In Fizz and Fiber this is split into renderWithHooks and
finishFunctionComponent since they also support indeterminate
components.

Interestingly thanks to this unification we always call functions with
an arity of 2 which is a bit weird - with the second argument being
undefined in everything except forwardRef and legacy context consumers.

This makes Flight makes the same thing but we could also call it with an
arity of 1.

Since Flight errors early if you try to pass it a ref, and there's no
legacy context, the second arg is always undefined.

The practical change in this PR is that returning a Promise from a
forwardRef now turns it into a lazy. We previously didn't support async
forwardRef since it wasn't supported on the client. However, since
eventually this will be supported by child-as-a-promise it seems fine to
support it.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…on (#28261)

This used to be trivial but it's no longer trivial.

In Fizz and Fiber this is split into renderWithHooks and
finishFunctionComponent since they also support indeterminate
components.

Interestingly thanks to this unification we always call functions with
an arity of 2 which is a bit weird - with the second argument being
undefined in everything except forwardRef and legacy context consumers.

This makes Flight makes the same thing but we could also call it with an
arity of 1.

Since Flight errors early if you try to pass it a ref, and there's no
legacy context, the second arg is always undefined.

The practical change in this PR is that returning a Promise from a
forwardRef now turns it into a lazy. We previously didn't support async
forwardRef since it wasn't supported on the client. However, since
eventually this will be supported by child-as-a-promise it seems fine to
support it.

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