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.

Sign up for GitHub

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

Jump to bottom

[Flight] Refactor the Render Loop to Behave More Like Fizz #28065

Merged
merged 7 commits into from
Jan 25, 2024
Merged

[Flight] Refactor the Render Loop to Behave More Like Fizz #28065

merged 7 commits into from
Jan 25, 2024

Conversation

sebmarkbage
Copy link
Collaborator

This refactors the Flight render loop to behave more like Fizz with similar naming conventions. So it's easier to apply similar techniques across both. This is not necessarily better/faster - at least not yet.

This doesn't yet implement serialization by writing segments to chunks but we probably should do that since the built-in parts that JSON.stringify gets us isn't really much anymore (except serializing strings). When we switch to that it probably makes sense for the whole thing to be recursive.

Right now it's not technically fully recursive because each recursive render returns the next JSON value to encode. So it's kind of like a trampoline. This means we can't have many contextual things on the stack. It needs to use the Server Context __POP trick. However, it does work for things that are contextual only for one sequence of server component abstractions in a row. Since those are now recursive.

An interesting observation here is that renderModel means that anything can suspend while still serializing the outer siblings. Typically only Lazy or Components would suspend but in principle a Proxy can suspend/postpone too and now that is left serialized by reference to a future value. It's only if the thing that we rendered was something that can reduce to Lazy e.g. an Element that we can serialize it as a lazy.

Similarly to how Suspense boundaries in Fizz can catch errors, anything that can be reduced to Lazy can also catch an error rather than bubbling it. It only errors when the Lazy resolves. Unlike Suspense boundaries though, those things don't render anything so they're otherwise going to use the destructive form. To ensure that throwing in an Element can reuse the current task, this must be handled by renderModel, not for example renderElement.

@sebmarkbage
attemptResolveElement -> renderElement
a03905f 
Start unifying naming with Fizz. They use a slightly different code
structure so it won't use the same recursion yet at least.
@sebmarkbage
Move toJSON closure to one per task so that we can pass the task to it
7ed9706
@sebmarkbage
Switch to recursive renderModel approach
15f377f 
Unlike Fizz, the split between renderModel/renderModelDestructive isn't used
because we don't bother catching suspense from anything but Lazy which is
already handling this separately.

In Fizz only Suspense boundaries can catch errors but in Flight any
Element can catch errors because it can be replaced by a Lazy.
@sebmarkbage
Retry a task using the recursive loop
9e50bc8 
This will render into a JSON value but will not be recursively resolved.
If it's a terminal JSON value shouldn't double encode it.
@sebmarkbage
We need to catch in renderModel after all
eabf7e4 
Otherwise resuspending can't be handled by retryTask.

Test that a sequence of server components is able to reuse the row
@sebmarkbage
Tail recursively render the result of server components
f3e8681 
That way this only happens in the non-terminal branches instead of being
called on the terminal branches too.
@sebmarkbage
Stash the active context on the task
c289c7e 
This doesn't come into play in Flight because the provider is not destructive
so you can't suspend in the current task within a new context.

The feature is also deprecated anyway.

This is just for parity.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 24, 2024
@react-sizebot
Copy link

Comparing: b2d6371...c289c7e

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.24 kB 176.24 kB = 54.88 kB 54.88 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.34 kB 178.34 kB = 55.53 kB 55.53 kB
facebook-www/ReactDOM-prod.classic.js = 571.94 kB 571.94 kB = 100.56 kB 100.56 kB
facebook-www/ReactDOM-prod.modern.js = 555.70 kB 555.70 kB = 97.62 kB 97.62 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 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
facebook-www/ReactFlightDOMServer-dev.modern.js +1.71% 80.38 kB 81.76 kB +1.90% 17.09 kB 17.41 kB
facebook-www/ReactFlightDOMServer-prod.modern.js +1.70% 38.23 kB 38.88 kB +1.08% 8.62 kB 8.71 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.js +1.45% 56.86 kB 57.68 kB +2.04% 13.76 kB 14.04 kB
oss-stable/react-server/cjs/react-server-flight.production.js +1.45% 56.86 kB 57.68 kB +2.04% 13.76 kB 14.04 kB
oss-experimental/react-server/cjs/react-server-flight.production.js +1.39% 67.47 kB 68.40 kB +2.10% 15.80 kB 16.13 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +1.35% 78.30 kB 79.35 kB +1.59% 18.43 kB 18.72 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +1.34% 65.56 kB 66.44 kB +1.60% 15.81 kB 16.07 kB
oss-stable/react-server/cjs/react-server-flight.development.js +1.34% 65.56 kB 66.44 kB +1.60% 15.81 kB 16.07 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.93% 113.37 kB 114.42 kB +1.11% 26.55 kB 26.84 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.92% 101.13 kB 102.07 kB +1.35% 23.42 kB 23.74 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.91% 115.44 kB 116.50 kB +1.03% 27.34 kB 27.63 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.91% 90.30 kB 91.12 kB +1.20% 21.27 kB 21.53 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js +0.91% 90.30 kB 91.12 kB +1.20% 21.27 kB 21.53 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.90% 116.82 kB 117.87 kB +0.99% 27.81 kB 28.09 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.90% 103.65 kB 104.58 kB +1.33% 24.45 kB 24.77 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.90% 104.31 kB 105.24 kB +1.31% 24.65 kB 24.97 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.89% 118.02 kB 119.08 kB +1.02% 28.07 kB 28.35 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.89% 92.36 kB 93.19 kB +1.24% 22.12 kB 22.39 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.89% 92.36 kB 93.19 kB +1.24% 22.12 kB 22.39 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.89% 118.78 kB 119.83 kB +1.05% 27.76 kB 28.06 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.89% 118.88 kB 119.94 kB +0.94% 28.38 kB 28.65 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.89% 93.02 kB 93.85 kB +1.22% 22.31 kB 22.58 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.89% 93.02 kB 93.85 kB +1.22% 22.31 kB 22.58 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.88% 99.76 kB 100.64 kB +1.04% 23.60 kB 23.85 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.88% 99.76 kB 100.64 kB +1.04% 23.60 kB 23.85 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.88% 106.23 kB 107.17 kB +1.29% 25.19 kB 25.51 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.88% 106.36 kB 107.30 kB +1.27% 25.23 kB 25.55 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.88% 106.53 kB 107.47 kB +1.29% 24.67 kB 24.99 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js +0.88% 121.95 kB 123.01 kB +1.06% 27.75 kB 28.04 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.87% 121.20 kB 122.26 kB +0.99% 28.40 kB 28.69 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.87% 121.42 kB 122.48 kB +0.98% 28.61 kB 28.89 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.87% 94.95 kB 95.77 kB +1.16% 22.85 kB 23.12 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.87% 94.95 kB 95.77 kB +1.16% 22.85 kB 23.12 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.87% 95.08 kB 95.91 kB +1.18% 22.88 kB 23.15 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.87% 95.08 kB 95.91 kB +1.18% 22.88 kB 23.15 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.86% 102.04 kB 102.92 kB +0.98% 24.44 kB 24.68 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.86% 102.04 kB 102.92 kB +0.98% 24.44 kB 24.68 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.86% 95.70 kB 96.52 kB +1.22% 22.49 kB 22.77 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.js +0.86% 95.70 kB 96.52 kB +1.22% 22.49 kB 22.77 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.86% 108.95 kB 109.88 kB +1.11% 25.33 kB 25.61 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js +0.86% 124.67 kB 125.74 kB +1.01% 28.48 kB 28.77 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.86% 102.74 kB 103.62 kB +0.99% 24.65 kB 24.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.86% 102.74 kB 103.62 kB +0.99% 24.65 kB 24.89 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.86% 109.20 kB 110.13 kB +1.23% 25.51 kB 25.82 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.85% 123.84 kB 124.89 kB +0.94% 29.29 kB 29.56 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.84% 104.62 kB 105.50 kB +0.93% 25.17 kB 25.40 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.84% 104.62 kB 105.50 kB +0.93% 25.17 kB 25.40 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.84% 98.11 kB 98.94 kB +1.12% 23.12 kB 23.38 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.84% 98.11 kB 98.94 kB +1.12% 23.12 kB 23.38 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.84% 104.80 kB 105.68 kB +0.95% 25.20 kB 25.44 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.84% 104.80 kB 105.68 kB +0.95% 25.20 kB 25.44 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.84% 111.60 kB 112.54 kB +1.24% 26.19 kB 26.51 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.84% 98.36 kB 99.19 kB +1.12% 23.35 kB 23.62 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.84% 98.36 kB 99.19 kB +1.12% 23.35 kB 23.62 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.84% 105.17 kB 106.05 kB +0.99% 24.81 kB 25.06 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.84% 105.17 kB 106.05 kB +0.99% 24.81 kB 25.06 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js +0.83% 107.85 kB 108.74 kB +1.00% 24.78 kB 25.03 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.development.js +0.83% 107.85 kB 108.74 kB +1.00% 24.78 kB 25.03 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.82% 107.60 kB 108.48 kB +0.94% 25.44 kB 25.68 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.82% 107.60 kB 108.48 kB +0.94% 25.44 kB 25.68 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.82% 100.77 kB 101.60 kB +1.07% 24.03 kB 24.29 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.82% 100.77 kB 101.60 kB +1.07% 24.03 kB 24.29 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.82% 107.82 kB 108.70 kB +0.94% 25.66 kB 25.90 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.82% 107.82 kB 108.70 kB +0.94% 25.66 kB 25.90 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js +0.80% 110.57 kB 111.46 kB +0.96% 25.52 kB 25.76 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js +0.80% 110.57 kB 111.46 kB +0.96% 25.52 kB 25.76 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.80% 110.23 kB 111.11 kB +0.91% 26.32 kB 26.56 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.80% 110.23 kB 111.11 kB +0.91% 26.32 kB 26.56 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.00 kB 28.94 kB +0.29% 9.76 kB 9.78 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 29.00 kB 28.94 kB +0.29% 9.76 kB 9.78 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 28.49 kB 28.43 kB +0.27% 9.60 kB 9.63 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 28.49 kB 28.43 kB +0.27% 9.60 kB 9.63 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 28.19 kB 28.13 kB +0.42% 9.54 kB 9.58 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 28.19 kB 28.13 kB +0.42% 9.54 kB 9.58 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 27.70 kB 27.64 kB +0.32% 9.40 kB 9.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 27.70 kB 27.64 kB +0.32% 9.40 kB 9.43 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 27.51 kB 27.46 kB +0.24% 9.26 kB 9.29 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 27.51 kB 27.46 kB +0.24% 9.26 kB 9.29 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 27.14 kB 27.08 kB +0.24% 9.14 kB 9.17 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 27.14 kB 27.08 kB +0.24% 9.14 kB 9.17 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 26.88 kB 26.82 kB +0.30% 9.11 kB 9.13 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 26.88 kB 26.82 kB +0.30% 9.11 kB 9.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 26.39 kB 26.33 kB +0.19% 8.96 kB 8.97 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 26.39 kB 26.33 kB +0.19% 8.96 kB 8.97 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 27.23 kB 27.17 kB +0.12% 9.25 kB 9.26 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 27.23 kB 27.17 kB +0.12% 9.25 kB 9.26 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js = 32.11 kB 32.04 kB +0.48% 10.62 kB 10.68 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js = 31.61 kB 31.54 kB +0.55% 10.46 kB 10.52 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 25.66 kB 25.60 kB +0.47% 8.82 kB 8.86 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 25.66 kB 25.60 kB +0.47% 8.82 kB 8.86 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.min.js = 31.31 kB 31.24 kB +0.60% 10.41 kB 10.47 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 26.50 kB 26.44 kB +0.03% 9.03 kB 9.03 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 26.50 kB 26.44 kB +0.03% 9.03 kB 9.03 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.production.min.js = 30.81 kB 30.74 kB +0.58% 10.26 kB 10.32 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 30.69 kB 30.61 kB +0.64% 10.12 kB 10.19 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.min.js = 30.06 kB 29.98 kB +0.69% 9.97 kB 10.04 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 30.31 kB 30.23 kB +0.61% 10.01 kB 10.07 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 30.40 kB 30.33 kB +0.32% 10.12 kB 10.15 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.min.js = 29.56 kB 29.48 kB +0.65% 9.81 kB 9.87 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.min.js = 28.77 kB 28.70 kB +0.53% 9.70 kB 9.75 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-server.browser.production.min.js = 29.67 kB 29.60 kB +0.39% 9.89 kB 9.93 kB
oss-experimental/react-server/cjs/react-server-flight.production.min.js = 19.66 kB 19.59 kB +0.82% 6.87 kB 6.92 kB
oss-stable-semver/react-server/cjs/react-server-flight.production.min.js = 16.58 kB 16.52 kB +0.52% 6.00 kB 6.03 kB
oss-stable/react-server/cjs/react-server-flight.production.min.js = 16.58 kB 16.52 kB +0.52% 6.00 kB 6.03 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Generated by 🚫 dangerJS against c289c7e

@sebmarkbage sebmarkbage mentioned this pull request Jan 24, 2024
Merged
sebmarkbage
sebmarkbage commented Jan 24, 2024
View reviewed changes
packages/react-server/src/ReactFlightServer.js
@@ -648,12 +662,81 @@ function createTask(
abortSet: Set<Task>,
): Task {
const id = request.nextChunkId++;
if (typeof model === 'object' && model !== null) {
// Register this model as having the ID we're about to write.
request.writtenObjects.set(model, id);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Notably this doesn't tag things that are returned from a Server Component at this ID as having the same ID as the Element itself. So it might outline the return value again instead of reusing the same ID.

However, I'm not sure Server Components will be reusable with some other changes coming anyway.

@sebmarkbage sebmarkbage merged commit b123b9c into facebook:main Jan 25, 2024
36 checks passed
github-actions bot pushed a commit that referenced this pull request Jan 25, 2024
@sebmarkbage
[Flight] Refactor the Render Loop to Behave More Like Fizz (#28065)
68cd468 
This refactors the Flight render loop to behave more like Fizz with
similar naming conventions. So it's easier to apply similar techniques
across both. This is not necessarily better/faster - at least not yet.

This doesn't yet implement serialization by writing segments to chunks
but we probably should do that since the built-in parts that
`JSON.stringify` gets us isn't really much anymore (except serializing
strings). When we switch to that it probably makes sense for the whole
thing to be recursive.

Right now it's not technically fully recursive because each recursive
render returns the next JSON value to encode. So it's kind of like a
trampoline. This means we can't have many contextual things on the
stack. It needs to use the Server Context `__POP` trick. However, it
does work for things that are contextual only for one sequence of server
component abstractions in a row. Since those are now recursive.

An interesting observation here is that `renderModel` means that
anything can suspend while still serializing the outer siblings.
Typically only Lazy or Components would suspend but in principle a Proxy
can suspend/postpone too and now that is left serialized by reference to
a future value. It's only if the thing that we rendered was something
that can reduce to Lazy e.g. an Element that we can serialize it as a
lazy.

Similarly to how Suspense boundaries in Fizz can catch errors, anything
that can be reduced to Lazy can also catch an error rather than bubbling
it. It only errors when the Lazy resolves. Unlike Suspense boundaries
though, those things don't render anything so they're otherwise going to
use the destructive form. To ensure that throwing in an Element can
reuse the current task, this must be handled by `renderModel`, not for
example `renderElement`.

DiffTrain build for [b123b9c](b123b9c)
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 1, 2024
@gnoff
Successfully updated React from 60a927d04 to 1219d57fc.
509d4ea 
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
@gnoff gnoff mentioned this pull request Feb 1, 2024
Merged
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 5, 2024
@gnoff
Successfully updated React from 60a927d04 to 1219d57fc.
357370d 
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 6, 2024
@gnoff
updated React from 60a927d04 to 2bc7d336a.
2c56d72 
- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to gnoff/next.js that referenced this pull request Feb 6, 2024
@gnoff
updated React from 60a927d04 to 2bc7d336a.
6290768 
- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
gnoff added a commit to vercel/next.js that referenced this pull request Feb 6, 2024
@gnoff
Update React from 60a927d04 to 2bc7d336a (#61522)
2395557 
Updates React from 60a927d04 to 2bc7d336a

Also updates aliases for `react.shared-subset` to `react.react-server`

### React upstream changes

- facebook/react#28250
- facebook/react#28225
- facebook/react#28123
- facebook/react#28240
- facebook/react#28239
- facebook/react#28245
- facebook/react#28244
- facebook/react#28238
- facebook/react#28235
- facebook/react#28221
- facebook/react#28215
- facebook/react#28214
- facebook/react#28213
- facebook/react#28212
- facebook/react#28211
- facebook/react#28247
- facebook/react#28210
- facebook/react#28186
- facebook/react#28232
- facebook/react#28169
- facebook/react#28177
- facebook/react#28170
- facebook/react#28168
- facebook/react#28122
- facebook/react#27982
- facebook/react#28217
- facebook/react#28223
- facebook/react#28208
- facebook/react#28209
- facebook/react#28200
- facebook/react#28199
- facebook/react#28198
- facebook/react#28197
- facebook/react#28196
- facebook/react#28194
- facebook/react#28192
- facebook/react#28191
- facebook/react#28182
- facebook/react#28181
- facebook/react#28180
- facebook/react#28178
- facebook/react#28201
- facebook/react#28176
- facebook/react#28162
- facebook/react#28131
- facebook/react#28190
- facebook/react#28172
- facebook/react#28171
- facebook/react#28173
- facebook/react#28174
- facebook/react#28175
- facebook/react#28136
- facebook/react#28135
- facebook/react#28134
- facebook/react#28133
- facebook/react#28132
- facebook/react#28130
- facebook/react#28202
- facebook/react#28102
- facebook/react#28161
- facebook/react#28193
- facebook/react#28195
- facebook/react#28189
- facebook/react#28160
- facebook/react#28096
- facebook/react#28183
- facebook/react#28125
- facebook/react#28157
- facebook/react#28115
- facebook/react#28124
- facebook/react#28163
- facebook/react#28164
- facebook/react#28150
- facebook/react#28159
- facebook/react#28069
- facebook/react#28110
- facebook/react#28148
- facebook/react#28116
- facebook/react#28099
- facebook/react#28100
- facebook/react#28147
- facebook/react#28128
- facebook/react#28126
- facebook/react#28139
- facebook/react#28140
- facebook/react#28141
- facebook/react#28142
- facebook/react#28113
- facebook/react#28129
- facebook/react#28114
- facebook/react#28053
- facebook/react#28091
- facebook/react#28087
- facebook/react#28112
- facebook/react#28086
- facebook/react#28101
- facebook/react#28106
- facebook/react#28117
- facebook/react#28118
- facebook/react#28105
- facebook/react#27883
- facebook/react#28111
- facebook/react#28095
- facebook/react#28108
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939
- facebook/react#28090
- facebook/react#28089
- facebook/react#28076
- facebook/react#28074
- facebook/react#28103
- facebook/react#28098
- facebook/react#28097
- facebook/react#28068
- facebook/react#28093
- facebook/react#28094
- facebook/react#28073
- facebook/react#28084
- facebook/react#28063
- facebook/react#28085
- facebook/react#28083
- facebook/react#28065
- facebook/react#28061
- facebook/react#28077
- facebook/react#28075
- facebook/react#28078
- facebook/react#28050
- facebook/react#28011
- facebook/react#28055
- facebook/react#28066
- facebook/react#28067
- facebook/react#28010
- facebook/react#27993
- facebook/react#28052
- facebook/react#28060
- facebook/react#28059
- facebook/react#28034
- facebook/react#28033
- facebook/react#28004
- facebook/react#28051
- facebook/react#28012
- facebook/react#28001
- facebook/react#28002
- facebook/react#27995
- facebook/react#28006
- facebook/react#28005
- facebook/react#28007
- facebook/react#28008
- facebook/react#28009
- facebook/react#28000
- facebook/react#28003
- facebook/react#27997
- facebook/react#27240
- facebook/react#27977
- facebook/react#27940
- facebook/react#27939

Closes NEXT-2331
@ztanner ztanner mentioned this pull request Mar 19, 2024
Closed
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
@sebmarkbage @AndyPengc12
[Flight] Refactor the Render Loop to Behave More Like Fizz (facebook#…
39d95ae 
…28065)

This refactors the Flight render loop to behave more like Fizz with
similar naming conventions. So it's easier to apply similar techniques
across both. This is not necessarily better/faster - at least not yet.

This doesn't yet implement serialization by writing segments to chunks
but we probably should do that since the built-in parts that
`JSON.stringify` gets us isn't really much anymore (except serializing
strings). When we switch to that it probably makes sense for the whole
thing to be recursive.

Right now it's not technically fully recursive because each recursive
render returns the next JSON value to encode. So it's kind of like a
trampoline. This means we can't have many contextual things on the
stack. It needs to use the Server Context `__POP` trick. However, it
does work for things that are contextual only for one sequence of server
component abstractions in a row. Since those are now recursive.

An interesting observation here is that `renderModel` means that
anything can suspend while still serializing the outer siblings.
Typically only Lazy or Components would suspend but in principle a Proxy
can suspend/postpone too and now that is left serialized by reference to
a future value. It's only if the thing that we rendered was something
that can reduce to Lazy e.g. an Element that we can serialize it as a
lazy.

Similarly to how Suspense boundaries in Fizz can catch errors, anything
that can be reduced to Lazy can also catch an error rather than bubbling
it. It only errors when the Lazy resolves. Unlike Suspense boundaries
though, those things don't render anything so they're otherwise going to
use the destructive form. To ensure that throwing in an Element can
reuse the current task, this must be handled by `renderModel`, not for
example `renderElement`.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
@sebmarkbage
[Flight] Refactor the Render Loop to Behave More Like Fizz (#28065)
a39fd4e 
This refactors the Flight render loop to behave more like Fizz with
similar naming conventions. So it's easier to apply similar techniques
across both. This is not necessarily better/faster - at least not yet.

This doesn't yet implement serialization by writing segments to chunks
but we probably should do that since the built-in parts that
`JSON.stringify` gets us isn't really much anymore (except serializing
strings). When we switch to that it probably makes sense for the whole
thing to be recursive.

Right now it's not technically fully recursive because each recursive
render returns the next JSON value to encode. So it's kind of like a
trampoline. This means we can't have many contextual things on the
stack. It needs to use the Server Context `__POP` trick. However, it
does work for things that are contextual only for one sequence of server
component abstractions in a row. Since those are now recursive.

An interesting observation here is that `renderModel` means that
anything can suspend while still serializing the outer siblings.
Typically only Lazy or Components would suspend but in principle a Proxy
can suspend/postpone too and now that is left serialized by reference to
a future value. It's only if the thing that we rendered was something
that can reduce to Lazy e.g. an Element that we can serialize it as a
lazy.

Similarly to how Suspense boundaries in Fizz can catch errors, anything
that can be reduced to Lazy can also catch an error rather than bubbling
it. It only errors when the Lazy resolves. Unlike Suspense boundaries
though, those things don't render anything so they're otherwise going to
use the destructive form. To ensure that throwing in an Element can
reuse the current task, this must be handled by `renderModel`, not for
example `renderElement`.

DiffTrain build for commit b123b9c.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gnoff gnoff gnoff approved these changes

Assignees
No one assigned
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@sebmarkbage @react-sizebot @gnoff @facebook-github-bot