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] Emit Deduped Server Components Marker #31737

Merged
merged 1 commit into from
Dec 16, 2024

Conversation

sebmarkbage
Copy link
Collaborator

Stacked on #31736.

Screenshot 2024-12-11 at 8 21 12 PM

This emits a placeholder when we're deduping a component. This starts when the parent's self time ends, where we would've started rendering this component if it wasn't already started. The end time is when the actual render ends since the parent is also blocked by it.

@sebmarkbage sebmarkbage requested a review from eps1lon December 12, 2024 01:24
Copy link

vercel bot commented Dec 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 16, 2024 5:41pm

@react-sizebot
Copy link

react-sizebot commented Dec 12, 2024

Comparing: 07facb5...8379f33

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 510.76 kB 510.76 kB = 91.36 kB 91.36 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 515.55 kB 515.55 kB = 92.17 kB 92.17 kB
facebook-www/ReactDOM-prod.classic.js = 592.44 kB 592.44 kB = 104.43 kB 104.43 kB
facebook-www/ReactDOM-prod.modern.js = 582.70 kB 582.70 kB = 102.88 kB 102.88 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.48% 100.90 kB 102.40 kB +1.18% 19.18 kB 19.40 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.48% 101.02 kB 102.52 kB +1.22% 19.33 kB 19.57 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +1.46% 102.35 kB 103.84 kB +1.36% 19.06 kB 19.32 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.45% 103.21 kB 104.71 kB +1.19% 19.72 kB 19.96 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.45% 103.51 kB 105.01 kB +1.12% 19.74 kB 19.96 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.44% 103.77 kB 105.26 kB +1.19% 19.85 kB 20.09 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.42% 105.12 kB 106.62 kB +1.13% 20.06 kB 20.28 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.42% 105.31 kB 106.81 kB +1.11% 20.08 kB 20.30 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.39% 107.76 kB 109.26 kB +1.07% 20.53 kB 20.75 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.37% 109.51 kB 111.00 kB +1.07% 20.85 kB 21.08 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.37% 109.60 kB 111.09 kB +1.07% 20.89 kB 21.11 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.35% 110.50 kB 112.00 kB +1.09% 20.79 kB 21.02 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.34% 111.84 kB 113.33 kB +1.06% 21.05 kB 21.27 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.03% 141.37 kB 142.83 kB +0.90% 33.23 kB 33.52 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.29% 516.03 kB 517.53 kB +0.24% 92.90 kB 93.13 kB

Generated by 🚫 dangerJS against 7b5719c

@@ -66,6 +81,8 @@ export default async function App({prerender}) {
</div>
<Client />
<Note />
<Foo>{dedupedChild}</Foo>
<Bar>{Promise.resolve([dedupedChild])}</Bar>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I had to add this hack because there's an unrelated bug that cause debug info to shift order when the props are delayed.

// TODO: This is not going to resolve in the right order if there's more than one.

@@ -648,7 +654,8 @@ export function reportGlobalError(response: Response, error: Error): void {
}
});
if (enableProfilerTimer && enableComponentPerformanceTrack) {
flushComponentPerformance(getChunk(response, 0));
markAllTracksInOrder();
flushComponentPerformance(getChunk(response, 0), 0, -Infinity, -Infinity);
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit:

Suggested change
flushComponentPerformance(getChunk(response, 0), 0, -Infinity, -Infinity);
flushComponentPerformance(getRoot(), 0, -Infinity, -Infinity);

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I originally had that but it's not quite right because getRoot() is a public API and as such might end up with more stuff later on (like type checks of the arguments or something). However, it also means that the return type is constrained to a Thenable since that's what the public API is, but here I need it to be the chunk API.

Another consideration is that getRoot() being used in two places could also prevent it from being inlined in the wrapper unnecessarily.

@sebmarkbage sebmarkbage merged commit bdf1871 into facebook:main Dec 16, 2024
187 checks passed
sebmarkbage added a commit that referenced this pull request Dec 16, 2024
Stacked on #31737.

<img width="987" alt="Screenshot 2024-12-11 at 8 41 15 PM"
src="https://github.com/user-attachments/assets/438379a9-0138-4d02-a53a-419402839558"
/>

When mixing environments (like "use cache" or third party RSC) it's
useful to color and badge those components differently to differentiate.

I'm not putting them in separate tracks because when they do actually
execute, like cache misses or third party RSCs, they behave like they're
part of the same tree.
davesnx added a commit to davesnx/react that referenced this pull request Dec 18, 2024
…act into issue-31578-setter-arity-gcc

* 'issue-31578-setter-arity-gcc' of github.com:/davesnx/react:
  [flags] Clean up scheduler flags (facebook#31814)
  Enable debugRenderPhaseSideEffectsForStrictMode in test renderers (facebook#31761)
  Enable disableDefaultPropsExceptForClasses (facebook#31804)
  Turn on useModernStrictMode in test renderers (facebook#31769)
  [compiler][ez] Add shape for global Object.keys (facebook#31583)
  [compiler] Context variables as dependencies (facebook#31582)
  [compiler] Add fire to known React APIs (facebook#31795)
  [compiler] Add option for firing effect functions (facebook#31794)
  [compiler][be] Logger based debug printing in test runner (facebook#31809)
  [compiler][ez] Clean up duplicate code in propagateScopeDeps (facebook#31581)
  [compiler] Repro for aliased captures within inner function expressions (facebook#31770)
  [compiler][be] Playground now compiles entire program (facebook#31774)
  [Flight] Color and badge non-primary environments (facebook#31738)
  [Flight] Emit Deduped Server Components Marker (facebook#31737)
  [Flight] Sort Server Components Track Group ahead of Client Scheduler/Components Tracks (facebook#31736)
  Clean up context access profiling experiment (facebook#31806)
  [Flight] Stack Parallel Components in Separate Tracks (facebook#31735)
  Flag for requestPaint (facebook#31805)
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.

5 participants