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] Support (Async) Generator ServerComponent #28849

Merged
merged 1 commit into from
Apr 21, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Apr 16, 2024

Stacked on #28853 and #28854.

React supports rendering Iterable and will soon support AsyncIterable. As long as it's multi-shot since during an update we may have to rerender with new inputs an loop over the iterable again. Therefore the Iterator and AsyncIterator types are not supported directly as a child of React - and really it shouldn't pass between Hooks or components neither for this reason. For parity, that's also the case when used in Server Components.

However, there is a special case when the component rendered itself is a generator function. While it returns as a child an Iterator, the React Element itself can act as an Iterable because we can re-evaluate the function to create a new generator whenever we need to.

It's also very convenient to use generator functions over constructing an AsyncIterable. So this is a proposal to special case the Generator/AsyncGenerator returned by a (Async) Generator Function.

In Flight this means that when we render a Server Component we can serialize this value as an Iterable/AsyncIterable since that's effectively what rendering it on the server reduces down to. That way if Fiber can receive the result in any position.

For SuspenseList this would also need another special case because the children of SuspenseList represent "rows".

<SuspenseList><Component /></SuspenseList> currently is a single "row" even if the component renders multiple children or is an iterator. This is currently different if Component is a Server Component because it'll reduce down to an array/AsyncIterable and therefore be treated as one row per its child. This is different from <SuspenseList><Component /><Component /></SuspenseList> since that has a wrapper array and so this is always two rows.

It probably makes sense to special case a single-element child in SuspenseList to represent a component that generates rows. That way you can use an AsyncGeneratorFunction to do this.

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

react-sizebot commented Apr 16, 2024

Comparing: bf426f9...7778cc2

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 = 497.54 kB 497.54 kB = 88.93 kB 88.94 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 502.86 kB 502.86 kB = 89.84 kB 89.84 kB
facebook-www/ReactDOM-prod.classic.js = 591.00 kB 591.00 kB = 103.95 kB 103.95 kB
facebook-www/ReactDOM-prod.modern.js = 566.82 kB 566.82 kB = 100.15 kB 100.15 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +2.97% 110.18 kB 113.46 kB +3.00% 24.18 kB 24.90 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +2.30% 85.15 kB 87.10 kB +2.59% 19.79 kB 20.31 kB
oss-stable/react-server/cjs/react-server-flight.development.js +2.30% 85.15 kB 87.10 kB +2.59% 19.79 kB 20.31 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.17% 150.51 kB 153.78 kB +2.13% 33.29 kB 34.00 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.13% 153.22 kB 156.49 kB +2.14% 33.82 kB 34.54 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.11% 154.78 kB 158.05 kB +2.06% 34.30 kB 35.00 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.10% 155.66 kB 158.94 kB +2.10% 34.49 kB 35.21 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +2.09% 156.67 kB 159.94 kB +2.05% 34.31 kB 35.01 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.09% 156.71 kB 159.98 kB +2.02% 34.80 kB 35.50 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.06% 158.96 kB 162.23 kB +2.02% 34.90 kB 35.61 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.05% 159.31 kB 162.58 kB +2.02% 35.13 kB 35.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.02% 161.59 kB 164.86 kB +1.97% 35.73 kB 36.44 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 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/cjs/react-server-flight.development.js +2.97% 110.18 kB 113.46 kB +3.00% 24.18 kB 24.90 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +2.30% 85.15 kB 87.10 kB +2.59% 19.79 kB 20.31 kB
oss-stable/react-server/cjs/react-server-flight.development.js +2.30% 85.15 kB 87.10 kB +2.59% 19.79 kB 20.31 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.17% 150.51 kB 153.78 kB +2.13% 33.29 kB 34.00 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.13% 153.22 kB 156.49 kB +2.14% 33.82 kB 34.54 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.11% 154.78 kB 158.05 kB +2.06% 34.30 kB 35.00 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.10% 155.66 kB 158.94 kB +2.10% 34.49 kB 35.21 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +2.09% 156.67 kB 159.94 kB +2.05% 34.31 kB 35.01 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.09% 156.71 kB 159.98 kB +2.02% 34.80 kB 35.50 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.06% 158.96 kB 162.23 kB +2.02% 34.90 kB 35.61 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.05% 159.31 kB 162.58 kB +2.02% 35.13 kB 35.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.02% 161.59 kB 164.86 kB +1.97% 35.73 kB 36.44 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +1.60% 121.92 kB 123.88 kB +1.82% 28.17 kB 28.69 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +1.60% 121.92 kB 123.88 kB +1.82% 28.17 kB 28.69 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +1.57% 124.84 kB 126.79 kB +1.71% 28.77 kB 29.26 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +1.57% 124.84 kB 126.79 kB +1.71% 28.77 kB 29.26 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +1.56% 125.73 kB 127.68 kB +1.68% 29.01 kB 29.50 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +1.56% 125.73 kB 127.68 kB +1.68% 29.01 kB 29.50 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +1.54% 127.28 kB 129.24 kB +1.64% 29.45 kB 29.93 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +1.54% 127.28 kB 129.24 kB +1.64% 29.45 kB 29.93 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +1.53% 127.66 kB 129.61 kB +1.62% 29.50 kB 29.98 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +1.53% 127.66 kB 129.61 kB +1.62% 29.50 kB 29.98 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +1.53% 128.09 kB 130.04 kB +1.69% 29.18 kB 29.68 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +1.53% 128.09 kB 130.04 kB +1.69% 29.18 kB 29.68 kB
oss-experimental/react-server/cjs/react-server-flight.production.js +1.51% 55.19 kB 56.02 kB +1.49% 10.97 kB 11.14 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +1.50% 130.38 kB 132.33 kB +1.66% 29.77 kB 30.26 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +1.50% 130.38 kB 132.33 kB +1.66% 29.77 kB 30.26 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +1.50% 130.73 kB 132.68 kB +1.62% 29.99 kB 30.48 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +1.50% 130.73 kB 132.68 kB +1.62% 29.99 kB 30.48 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +1.47% 133.01 kB 134.97 kB +1.60% 30.61 kB 31.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +1.47% 133.01 kB 134.97 kB +1.60% 30.61 kB 31.10 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +1.02% 76.88 kB 77.66 kB +0.71% 16.04 kB 16.16 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +1.00% 78.37 kB 79.16 kB +0.69% 16.12 kB 16.23 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.99% 79.26 kB 80.04 kB +0.74% 16.35 kB 16.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.99% 79.45 kB 80.24 kB +0.65% 16.35 kB 16.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.98% 79.99 kB 80.77 kB +0.73% 16.50 kB 16.62 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js +0.97% 41.28 kB 41.68 kB +1.14% 9.00 kB 9.10 kB
oss-stable/react-server/cjs/react-server-flight.production.js +0.97% 41.28 kB 41.68 kB +1.14% 9.00 kB 9.10 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.96% 81.68 kB 82.47 kB +0.85% 16.78 kB 16.92 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.95% 82.64 kB 83.43 kB +0.84% 16.99 kB 17.13 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.95% 82.78 kB 83.57 kB +0.83% 16.99 kB 17.13 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.94% 83.73 kB 84.51 kB +0.84% 17.22 kB 17.36 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.60% 61.99 kB 62.36 kB +0.48% 13.88 kB 13.95 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.60% 61.99 kB 62.36 kB +0.48% 13.88 kB 13.95 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.59% 63.20 kB 63.57 kB +0.45% 13.90 kB 13.96 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.59% 63.20 kB 63.57 kB +0.45% 13.90 kB 13.96 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.58% 64.00 kB 64.37 kB +0.44% 14.14 kB 14.20 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.58% 64.00 kB 64.37 kB +0.44% 14.14 kB 14.20 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.58% 64.28 kB 64.65 kB +0.46% 14.12 kB 14.19 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.58% 64.28 kB 64.65 kB +0.46% 14.12 kB 14.19 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.58% 64.73 kB 65.10 kB +0.44% 14.28 kB 14.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.58% 64.73 kB 65.10 kB +0.44% 14.28 kB 14.34 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.56% 66.79 kB 67.16 kB +0.48% 14.61 kB 14.68 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.56% 66.79 kB 67.16 kB +0.48% 14.61 kB 14.68 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.55% 67.75 kB 68.12 kB +0.47% 14.82 kB 14.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.55% 67.75 kB 68.12 kB +0.47% 14.82 kB 14.89 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.55% 67.89 kB 68.26 kB +0.47% 14.82 kB 14.89 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.55% 67.89 kB 68.26 kB +0.47% 14.82 kB 14.89 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.54% 68.83 kB 69.21 kB +0.45% 15.04 kB 15.11 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.54% 68.83 kB 69.21 kB +0.45% 15.04 kB 15.11 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 kB 0.00 kB

Generated by 🚫 dangerJS against 7778cc2

Copy link
Collaborator

@gnoff gnoff left a comment

Choose a reason for hiding this comment

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

It probably makes sense to special case a single-element child in SuspenseList to represent a component that generates rows. That way you can use an AsyncGeneratorFunction to do this.

This is subtle. I get that it would be convenient both as a utility to the user and from our own implementation but I wonder if it's too subtle

sebmarkbage added a commit that referenced this pull request Apr 21, 2024
…28853)

This doesn't change production behavior. We always render Iterables to
our best effort in prod even if they're Iterators.

But this does change the DEV warnings which indicates which are valid
patterns to use.

It's a footgun to use an Iterator as a prop when you pass between
components because if an intermediate component rerenders without its
parent, React won't be able to iterate it again to reconcile and any
mappers won't be able to re-apply. This is actually typically not a
problem when passed only to React host components but as a pattern it's
a problem for composability.

We used to warn only for Generators - i.e. Iterators returned from
Generator functions. This adds a warning for Iterators created by other
means too (e.g. Flight or the native Iterator utils). The heuristic is
to check whether the Iterator is the same as the Iterable because that
means it's not possible to get new iterators out of it. This case used
to just yield non-sense like empty sets in DEV but not in prod.

However, a new realization is that when the Component itself is a
Generator Function, it's not actually a problem. That's because the
React Element itself works as an Iterable since we can ask for new
generators by calling the function again. So this adds a special case to
allow the Generator returned from a Generator Function's direct child.
The principle is “don’t pass iterators around” but in this case there is
no iterator floating around because it’s between React and the JS VM.

Also see #28849 for context on AsyncIterables.

Related to this, but Hooks should ideally be banned in these for the
same reason they're banned in Async Functions.
github-actions bot pushed a commit that referenced this pull request Apr 21, 2024
…28853)

This doesn't change production behavior. We always render Iterables to
our best effort in prod even if they're Iterators.

But this does change the DEV warnings which indicates which are valid
patterns to use.

It's a footgun to use an Iterator as a prop when you pass between
components because if an intermediate component rerenders without its
parent, React won't be able to iterate it again to reconcile and any
mappers won't be able to re-apply. This is actually typically not a
problem when passed only to React host components but as a pattern it's
a problem for composability.

We used to warn only for Generators - i.e. Iterators returned from
Generator functions. This adds a warning for Iterators created by other
means too (e.g. Flight or the native Iterator utils). The heuristic is
to check whether the Iterator is the same as the Iterable because that
means it's not possible to get new iterators out of it. This case used
to just yield non-sense like empty sets in DEV but not in prod.

However, a new realization is that when the Component itself is a
Generator Function, it's not actually a problem. That's because the
React Element itself works as an Iterable since we can ask for new
generators by calling the function again. So this adds a special case to
allow the Generator returned from a Generator Function's direct child.
The principle is “don’t pass iterators around” but in this case there is
no iterator floating around because it’s between React and the JS VM.

Also see #28849 for context on AsyncIterables.

Related to this, but Hooks should ideally be banned in these for the
same reason they're banned in Async Functions.

DiffTrain build for commit 3682021.
github-actions bot pushed a commit that referenced this pull request Apr 21, 2024
…28853)

This doesn't change production behavior. We always render Iterables to
our best effort in prod even if they're Iterators.

But this does change the DEV warnings which indicates which are valid
patterns to use.

It's a footgun to use an Iterator as a prop when you pass between
components because if an intermediate component rerenders without its
parent, React won't be able to iterate it again to reconcile and any
mappers won't be able to re-apply. This is actually typically not a
problem when passed only to React host components but as a pattern it's
a problem for composability.

We used to warn only for Generators - i.e. Iterators returned from
Generator functions. This adds a warning for Iterators created by other
means too (e.g. Flight or the native Iterator utils). The heuristic is
to check whether the Iterator is the same as the Iterable because that
means it's not possible to get new iterators out of it. This case used
to just yield non-sense like empty sets in DEV but not in prod.

However, a new realization is that when the Component itself is a
Generator Function, it's not actually a problem. That's because the
React Element itself works as an Iterable since we can ask for new
generators by calling the function again. So this adds a special case to
allow the Generator returned from a Generator Function's direct child.
The principle is “don’t pass iterators around” but in this case there is
no iterator floating around because it’s between React and the JS VM.

Also see #28849 for context on AsyncIterables.

Related to this, but Hooks should ideally be banned in these for the
same reason they're banned in Async Functions.

DiffTrain build for [3682021](3682021)
@sebmarkbage sebmarkbage merged commit 5b903cd into facebook:main Apr 21, 2024
38 checks passed
github-actions bot pushed a commit that referenced this pull request Apr 21, 2024
Stacked on #28853 and #28854.

React supports rendering `Iterable` and will soon support
`AsyncIterable`. As long as it's multi-shot since during an update we
may have to rerender with new inputs an loop over the iterable again.
Therefore the `Iterator` and `AsyncIterator` types are not supported
directly as a child of React - and really it shouldn't pass between
Hooks or components neither for this reason. For parity, that's also the
case when used in Server Components.

However, there is a special case when the component rendered itself is a
generator function. While it returns as a child an `Iterator`, the React
Element itself can act as an `Iterable` because we can re-evaluate the
function to create a new generator whenever we need to.

It's also very convenient to use generator functions over constructing
an `AsyncIterable`. So this is a proposal to special case the
`Generator`/`AsyncGenerator` returned by a (Async) Generator Function.

In Flight this means that when we render a Server Component we can
serialize this value as an `Iterable`/`AsyncIterable` since that's
effectively what rendering it on the server reduces down to. That way if
Fiber can receive the result in any position.

For SuspenseList this would also need another special case because the
children of SuspenseList represent "rows".

`<SuspenseList><Component /></SuspenseList>` currently is a single "row"
even if the component renders multiple children or is an iterator. This
is currently different if Component is a Server Component because it'll
reduce down to an array/AsyncIterable and therefore be treated as one
row per its child. This is different from `<SuspenseList><Component
/><Component /></SuspenseList>` since that has a wrapper array and so
this is always two rows.

It probably makes sense to special case a single-element child in
`SuspenseList` to represent a component that generates rows. That way
you can use an `AsyncGeneratorFunction` to do this.

DiffTrain build for [5b903cd](5b903cd)
sebmarkbage added a commit that referenced this pull request Apr 22, 2024
…ent Components (#28868)

Stacked on #28849, #28854, #28853. Behind a flag.

If you're following along from the side-lines. This is probably not what
you think it is.

It's NOT a way to get updates to a component over time. The
AsyncIterable works like an Iterable already works in React which is how
an Array works. I.e. it's a list of children - not the value of a child
over time.

It also doesn't actually render one component at a time. The way it
works is more like awaiting the entire list to become an array and then
it shows up. Before that it suspends the parent.

To actually get these to display one at a time, you have to opt-in with
`<SuspenseList>` to describe how they should appear. That's really the
interesting part and that not implemented yet.

Additionally, since these are effectively Async Functions and uncached
promises, they're not actually fully "supported" on the client yet for
the same reason rendering plain Promises and Async Functions aren't.
They warn. It's only really useful when paired with RSC that produces
instrumented versions of these. Ideally we'd published instrumented
helpers to help with map/filter style operations that yield new
instrumented AsyncIterables.

The way the implementation works basically just relies on unwrapThenable
and otherwise works like a plain Iterator.

There is one quirk with these that are different than just promises. We
ask for a new iterator each time we rerender. This means that upon retry
we kick off another iteration which itself might kick off new requests
that block iterating further. To solve this and make it actually
efficient enough to use on the client we'd need to stash something like
a buffer of the previous iteration and maybe iterator on the iterable so
that we can continue where we left off or synchronously iterate if we've
seen it before. Similar to our `.value` convention on Promises.

In Fizz, I had to do a special case because when we render an iterator
child we don't actually rerender the parent again like we do in Fiber.
However, it's more efficient to just continue on where we left off by
reusing the entries from the thenable state from before in that case.
github-actions bot pushed a commit that referenced this pull request Apr 22, 2024
…ent Components (#28868)

Stacked on #28849, #28854, #28853. Behind a flag.

If you're following along from the side-lines. This is probably not what
you think it is.

It's NOT a way to get updates to a component over time. The
AsyncIterable works like an Iterable already works in React which is how
an Array works. I.e. it's a list of children - not the value of a child
over time.

It also doesn't actually render one component at a time. The way it
works is more like awaiting the entire list to become an array and then
it shows up. Before that it suspends the parent.

To actually get these to display one at a time, you have to opt-in with
`<SuspenseList>` to describe how they should appear. That's really the
interesting part and that not implemented yet.

Additionally, since these are effectively Async Functions and uncached
promises, they're not actually fully "supported" on the client yet for
the same reason rendering plain Promises and Async Functions aren't.
They warn. It's only really useful when paired with RSC that produces
instrumented versions of these. Ideally we'd published instrumented
helpers to help with map/filter style operations that yield new
instrumented AsyncIterables.

The way the implementation works basically just relies on unwrapThenable
and otherwise works like a plain Iterator.

There is one quirk with these that are different than just promises. We
ask for a new iterator each time we rerender. This means that upon retry
we kick off another iteration which itself might kick off new requests
that block iterating further. To solve this and make it actually
efficient enough to use on the client we'd need to stash something like
a buffer of the previous iteration and maybe iterator on the iterable so
that we can continue where we left off or synchronously iterate if we've
seen it before. Similar to our `.value` convention on Promises.

In Fizz, I had to do a special case because when we render an iterator
child we don't actually rerender the parent again like we do in Fiber.
However, it's more efficient to just continue on where we left off by
reusing the entries from the thenable state from before in that case.

DiffTrain build for commit 9f2eebd.
github-actions bot pushed a commit that referenced this pull request Apr 22, 2024
…ent Components (#28868)

Stacked on #28849, #28854, #28853. Behind a flag.

If you're following along from the side-lines. This is probably not what
you think it is.

It's NOT a way to get updates to a component over time. The
AsyncIterable works like an Iterable already works in React which is how
an Array works. I.e. it's a list of children - not the value of a child
over time.

It also doesn't actually render one component at a time. The way it
works is more like awaiting the entire list to become an array and then
it shows up. Before that it suspends the parent.

To actually get these to display one at a time, you have to opt-in with
`<SuspenseList>` to describe how they should appear. That's really the
interesting part and that not implemented yet.

Additionally, since these are effectively Async Functions and uncached
promises, they're not actually fully "supported" on the client yet for
the same reason rendering plain Promises and Async Functions aren't.
They warn. It's only really useful when paired with RSC that produces
instrumented versions of these. Ideally we'd published instrumented
helpers to help with map/filter style operations that yield new
instrumented AsyncIterables.

The way the implementation works basically just relies on unwrapThenable
and otherwise works like a plain Iterator.

There is one quirk with these that are different than just promises. We
ask for a new iterator each time we rerender. This means that upon retry
we kick off another iteration which itself might kick off new requests
that block iterating further. To solve this and make it actually
efficient enough to use on the client we'd need to stash something like
a buffer of the previous iteration and maybe iterator on the iterable so
that we can continue where we left off or synchronously iterate if we've
seen it before. Similar to our `.value` convention on Promises.

In Fizz, I had to do a special case because when we render an iterator
child we don't actually rerender the parent again like we do in Fiber.
However, it's more efficient to just continue on where we left off by
reusing the entries from the thenable state from before in that case.

DiffTrain build for [9f2eebd](9f2eebd)
bigfootjon pushed a commit that referenced this pull request Apr 25, 2024
…28853)

This doesn't change production behavior. We always render Iterables to
our best effort in prod even if they're Iterators.

But this does change the DEV warnings which indicates which are valid
patterns to use.

It's a footgun to use an Iterator as a prop when you pass between
components because if an intermediate component rerenders without its
parent, React won't be able to iterate it again to reconcile and any
mappers won't be able to re-apply. This is actually typically not a
problem when passed only to React host components but as a pattern it's
a problem for composability.

We used to warn only for Generators - i.e. Iterators returned from
Generator functions. This adds a warning for Iterators created by other
means too (e.g. Flight or the native Iterator utils). The heuristic is
to check whether the Iterator is the same as the Iterable because that
means it's not possible to get new iterators out of it. This case used
to just yield non-sense like empty sets in DEV but not in prod.

However, a new realization is that when the Component itself is a
Generator Function, it's not actually a problem. That's because the
React Element itself works as an Iterable since we can ask for new
generators by calling the function again. So this adds a special case to
allow the Generator returned from a Generator Function's direct child.
The principle is “don’t pass iterators around” but in this case there is
no iterator floating around because it’s between React and the JS VM.

Also see #28849 for context on AsyncIterables.

Related to this, but Hooks should ideally be banned in these for the
same reason they're banned in Async Functions.

DiffTrain build for commit 3682021.
bigfootjon pushed a commit that referenced this pull request Apr 25, 2024
…ent Components (#28868)

Stacked on #28849, #28854, #28853. Behind a flag.

If you're following along from the side-lines. This is probably not what
you think it is.

It's NOT a way to get updates to a component over time. The
AsyncIterable works like an Iterable already works in React which is how
an Array works. I.e. it's a list of children - not the value of a child
over time.

It also doesn't actually render one component at a time. The way it
works is more like awaiting the entire list to become an array and then
it shows up. Before that it suspends the parent.

To actually get these to display one at a time, you have to opt-in with
`<SuspenseList>` to describe how they should appear. That's really the
interesting part and that not implemented yet.

Additionally, since these are effectively Async Functions and uncached
promises, they're not actually fully "supported" on the client yet for
the same reason rendering plain Promises and Async Functions aren't.
They warn. It's only really useful when paired with RSC that produces
instrumented versions of these. Ideally we'd published instrumented
helpers to help with map/filter style operations that yield new
instrumented AsyncIterables.

The way the implementation works basically just relies on unwrapThenable
and otherwise works like a plain Iterator.

There is one quirk with these that are different than just promises. We
ask for a new iterator each time we rerender. This means that upon retry
we kick off another iteration which itself might kick off new requests
that block iterating further. To solve this and make it actually
efficient enough to use on the client we'd need to stash something like
a buffer of the previous iteration and maybe iterator on the iterable so
that we can continue where we left off or synchronously iterate if we've
seen it before. Similar to our `.value` convention on Promises.

In Fizz, I had to do a special case because when we render an iterator
child we don't actually rerender the parent again like we do in Fiber.
However, it's more efficient to just continue on where we left off by
reusing the entries from the thenable state from before in that case.

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