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

Detect and warn about native async function components in development #27031

Merged
merged 1 commit into from
Jul 2, 2023

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Jun 30, 2023

Adds a development warning to complement the error introduced by #27019.

We can detect and warn about async client components by checking the prototype of the function. This won't work for environments where async functions are transpiled, but for native async functions, it allows us to log an earlier warning during development, including in cases that don't trigger the infinite loop guard added in #27019. It does not supersede the infinite loop guard, though, because that mechanism also prevents the app from crashing.

I also added a warning for calling a hook inside an async function. This one fires even during a transition. We could add a corresponding warning to Flight, since hooks are not allowed in async Server Components, either. (Though in both environments, this is better handled by a lint rule.)

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

react-sizebot commented Jun 30, 2023

Comparing: 47385f8...b4b0526

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 +0.08% 164.22 kB 164.35 kB +0.04% 51.74 kB 51.76 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.08% 171.63 kB 171.76 kB +0.06% 53.95 kB 53.98 kB
facebook-www/ReactDOM-prod.classic.js +0.08% 566.78 kB 567.22 kB +0.07% 99.97 kB 100.04 kB
facebook-www/ReactDOM-prod.modern.js +0.08% 550.58 kB 551.02 kB +0.08% 97.13 kB 97.21 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/cjs/react-jsx-dev-runtime.development.js +0.91% 42.93 kB 43.32 kB +0.98% 12.52 kB 12.65 kB
oss-stable-semver/react/cjs/react-jsx-dev-runtime.development.js +0.91% 42.96 kB 43.35 kB +0.98% 12.53 kB 12.65 kB
oss-stable/react/cjs/react-jsx-dev-runtime.development.js +0.91% 42.96 kB 43.35 kB +0.98% 12.53 kB 12.65 kB
oss-experimental/react/cjs/react-jsx-runtime.development.js +0.89% 43.53 kB 43.92 kB +0.95% 12.70 kB 12.82 kB
oss-stable-semver/react/cjs/react-jsx-runtime.development.js +0.89% 43.56 kB 43.94 kB +0.95% 12.70 kB 12.83 kB
oss-stable/react/cjs/react-jsx-runtime.development.js +0.89% 43.56 kB 43.94 kB +0.95% 12.70 kB 12.83 kB
facebook-www/JSXDEVRuntime-dev.modern.js +0.87% 44.76 kB 45.15 kB +0.98% 12.70 kB 12.82 kB
facebook-www/JSXDEVRuntime-dev.classic.js +0.87% 44.76 kB 45.15 kB +0.98% 12.70 kB 12.82 kB
facebook-www/ReactTestRenderer-dev.modern.js +0.54% 800.90 kB 805.23 kB +0.68% 173.67 kB 174.85 kB
facebook-www/ReactTestRenderer-dev.classic.js +0.54% 800.90 kB 805.24 kB +0.68% 173.67 kB 174.85 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js +0.53% 782.65 kB 786.82 kB +0.64% 171.52 kB 172.62 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js +0.53% 782.68 kB 786.85 kB +0.64% 171.55 kB 172.65 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js +0.53% 783.05 kB 787.21 kB +0.64% 171.63 kB 172.73 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js +0.52% 819.78 kB 824.08 kB +0.65% 173.30 kB 174.43 kB
oss-stable/react-test-renderer/umd/react-test-renderer.development.js +0.52% 819.81 kB 824.10 kB +0.65% 173.33 kB 174.46 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.development.js +0.52% 820.20 kB 824.49 kB +0.65% 173.43 kB 174.55 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.52% 801.27 kB 805.44 kB +0.65% 175.21 kB 176.35 kB
oss-stable/react-art/cjs/react-art.development.js +0.52% 801.30 kB 805.47 kB +0.65% 175.23 kB 176.37 kB
oss-experimental/react-art/cjs/react-art.development.js +0.51% 823.28 kB 827.45 kB +0.64% 179.59 kB 180.73 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +0.50% 794.60 kB 798.54 kB +0.61% 172.85 kB 173.91 kB
facebook-www/ReactART-dev.modern.js +0.48% 901.00 kB 905.34 kB +0.60% 192.17 kB 193.32 kB
facebook-www/ReactART-dev.classic.js +0.48% 912.21 kB 916.55 kB +0.60% 194.46 kB 195.62 kB
oss-stable-semver/react-art/umd/react-art.development.js +0.47% 916.00 kB 920.29 kB +0.58% 194.27 kB 195.40 kB
oss-stable/react-art/umd/react-art.development.js +0.47% 916.02 kB 920.32 kB +0.58% 194.30 kB 195.43 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.46% 897.82 kB 901.99 kB +0.60% 192.74 kB 193.89 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.46% 897.84 kB 902.01 kB +0.60% 192.78 kB 193.93 kB
oss-stable-semver/react/cjs/react.shared-subset.development.js +0.46% 84.33 kB 84.72 kB +0.55% 23.37 kB 23.50 kB
oss-stable/react/cjs/react.shared-subset.development.js +0.46% 84.36 kB 84.75 kB +0.56% 23.40 kB 23.53 kB
react-native/implementations/ReactFabric-dev.js +0.46% 859.37 kB 863.32 kB +0.58% 187.27 kB 188.36 kB
oss-experimental/react-art/umd/react-art.development.js +0.46% 939.09 kB 943.39 kB +0.58% 198.63 kB 199.78 kB
oss-experimental/react/cjs/react.shared-subset.development.js +0.45% 85.70 kB 86.09 kB +0.55% 23.79 kB 23.92 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.45% 921.32 kB 925.49 kB +0.59% 197.50 kB 198.67 kB
react-native/implementations/ReactNativeRenderer-dev.js +0.45% 875.03 kB 878.97 kB +0.55% 191.64 kB 192.69 kB
react-native/implementations/ReactFabric-dev.fb.js +0.45% 885.94 kB 889.89 kB +0.55% 191.91 kB 192.96 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.44% 901.60 kB 905.55 kB +0.53% 196.37 kB 197.41 kB
oss-stable-semver/react/cjs/react.development.js +0.39% 99.40 kB 99.79 kB +0.43% 26.83 kB 26.94 kB
oss-stable/react/cjs/react.development.js +0.39% 99.42 kB 99.81 kB +0.43% 26.86 kB 26.97 kB
oss-experimental/react/cjs/react.development.js +0.38% 101.58 kB 101.97 kB +0.41% 27.41 kB 27.52 kB
oss-stable-semver/react-dom/cjs/react-dom.development.js +0.33% 1,261.91 kB 1,266.07 kB +0.40% 279.84 kB 280.97 kB
oss-stable/react-dom/cjs/react-dom.development.js +0.33% 1,261.93 kB 1,266.10 kB +0.40% 279.87 kB 281.00 kB
oss-stable-semver/react/umd/react.development.js +0.33% 122.95 kB 123.35 kB +0.42% 31.71 kB 31.84 kB
oss-stable/react/umd/react.development.js +0.33% 122.97 kB 123.37 kB +0.42% 31.74 kB 31.87 kB
oss-stable-semver/react-dom/umd/react-dom.development.js +0.32% 1,322.96 kB 1,327.26 kB +0.39% 282.85 kB 283.96 kB
oss-stable/react-dom/umd/react-dom.development.js +0.32% 1,322.99 kB 1,327.28 kB +0.39% 282.88 kB 283.99 kB
oss-experimental/react/umd/react.development.js +0.32% 125.22 kB 125.62 kB +0.40% 32.29 kB 32.42 kB
oss-experimental/react-dom/cjs/react-dom.development.js +0.32% 1,306.18 kB 1,310.34 kB +0.39% 289.49 kB 290.61 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.31% 1,324.23 kB 1,328.40 kB +0.39% 293.81 kB 294.97 kB
oss-experimental/react-dom/umd/react-dom.development.js +0.31% 1,369.30 kB 1,373.59 kB +0.39% 292.42 kB 293.55 kB
facebook-www/React-dev.modern.js +0.31% 125.69 kB 126.08 kB +0.38% 33.25 kB 33.37 kB
facebook-www/ReactDOM-dev.modern.js +0.31% 1,402.41 kB 1,406.75 kB +0.39% 303.45 kB 304.65 kB
facebook-www/React-dev.classic.js +0.31% 126.78 kB 127.17 kB +0.37% 33.50 kB 33.62 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.31% 1,420.75 kB 1,425.09 kB +0.39% 307.87 kB 309.07 kB
facebook-www/ReactDOM-dev.classic.js +0.30% 1,430.30 kB 1,434.64 kB +0.39% 308.98 kB 310.20 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.30% 1,448.65 kB 1,452.99 kB +0.38% 313.46 kB 314.65 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.min.js +0.29% 103.13 kB 103.43 kB +0.16% 31.71 kB 31.76 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.production.min.js +0.29% 103.52 kB 103.81 kB +0.14% 32.14 kB 32.18 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.min.js +0.29% 103.18 kB 103.48 kB +0.16% 31.74 kB 31.79 kB
oss-stable/react-test-renderer/umd/react-test-renderer.production.min.js +0.29% 103.57 kB 103.86 kB +0.13% 32.16 kB 32.21 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.min.js +0.29% 103.30 kB 103.60 kB +0.16% 31.77 kB 31.82 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.production.min.js +0.29% 103.69 kB 103.99 kB +0.14% 32.21 kB 32.26 kB
oss-stable-semver/react-server/cjs/react-server.development.js +0.27% 146.37 kB 146.76 kB +0.35% 36.47 kB 36.60 kB
oss-stable/react-server/cjs/react-server.development.js +0.27% 146.37 kB 146.76 kB +0.35% 36.47 kB 36.60 kB
oss-experimental/react-server/cjs/react-server.development.js +0.26% 147.49 kB 147.88 kB +0.34% 36.73 kB 36.86 kB

Generated by 🚫 dangerJS against b4b0526

@acdlite acdlite requested a review from sebmarkbage June 30, 2023 20:47
// for transpiled async functions. Neither mechanism is completely
// bulletproof but together they cover the most common cases.
const prototype: Object | null = Object.getPrototypeOf(Component);
if (prototype && prototype[Symbol.toStringTag] === 'AsyncFunction') {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Object.prototype.toString.call(Component) === '[object AsyncFunction]' could maybe be sufficient too. A bit more old school way of checking but seems more in line with how people do brand checking today.

Adds a development warning to complement the error introduced by facebook#27019.

We can detect and warn about async client components by checking the
prototype of the function. This won't work for environments where async
functions are transpiled, but for native async functions, it allows us
to log an earlier warning during development, including in cases that
don't trigger the infinite loop guard added in facebook#27019. It does not
supersede the infinite loop guard, though, because that mechanism also
prevents the app from crashing.

I also added a warning for calling a hook inside an async function. This
one fires even during a transition. We could add a corresponding warning
to Flight, since hooks are not allowed in async Server Components,
either. (Though in both environments, this is better handled by a
lint rule.)
@acdlite acdlite merged commit 5c8dabf into facebook:main Jul 2, 2023
github-actions bot pushed a commit that referenced this pull request Jul 2, 2023
…#27031)

Adds a development warning to complement the error introduced by
#27019.

We can detect and warn about async client components by checking the
prototype of the function. This won't work for environments where async
functions are transpiled, but for native async functions, it allows us
to log an earlier warning during development, including in cases that
don't trigger the infinite loop guard added in
#27019. It does not supersede the
infinite loop guard, though, because that mechanism also prevents the
app from crashing.

I also added a warning for calling a hook inside an async function. This
one fires even during a transition. We could add a corresponding warning
to Flight, since hooks are not allowed in async Server Components,
either. (Though in both environments, this is better handled by a lint
rule.)

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

Adds a development warning to complement the error introduced by
facebook#27019.

We can detect and warn about async client components by checking the
prototype of the function. This won't work for environments where async
functions are transpiled, but for native async functions, it allows us
to log an earlier warning during development, including in cases that
don't trigger the infinite loop guard added in
facebook#27019. It does not supersede the
infinite loop guard, though, because that mechanism also prevents the
app from crashing.

I also added a warning for calling a hook inside an async function. This
one fires even during a transition. We could add a corresponding warning
to Flight, since hooks are not allowed in async Server Components,
either. (Though in both environments, this is better handled by a lint
rule.)
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…#27031)

Adds a development warning to complement the error introduced by
#27019.

We can detect and warn about async client components by checking the
prototype of the function. This won't work for environments where async
functions are transpiled, but for native async functions, it allows us
to log an earlier warning during development, including in cases that
don't trigger the infinite loop guard added in
#27019. It does not supersede the
infinite loop guard, though, because that mechanism also prevents the
app from crashing.

I also added a warning for calling a hook inside an async function. This
one fires even during a transition. We could add a corresponding warning
to Flight, since hooks are not allowed in async Server Components,
either. (Though in both environments, this is better handled by a lint
rule.)

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