RFC(react-client): add $$typeof to server references in Flight #30371

kspeyanski · 2024-07-18T05:56:18Z

still WIP. opening PR for discussion.

Summary

Hello, I wanted to reach out and ask if it would be possible to add the $$typeof property to server references on the client. The exact use-case I'm trying to tackle is identifying server actions in a client component, in order to run callbacks/actions either inside a startTransition, or as a regular callback.

From a UI Library maintainer point-of-view this makes sense as it allows us to build functionality on top-of which we're providing out-of-the-box pending state and UI (e.g. while waiting for the server action to run).

if(isServerReference(props.onStateChange)) {
  startTransition(() => {
    props.onStateChange(newState, action);
  });
} else {
  props.onStateChange(newState, action, syntheticEvent);
}

Additionally, I think this behavior is more in-line with the react-server-dom counterpart of the registerServerReference function:

react/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js

Lines 87 to 101 in 163365a

 export function registerServerReference<T: Function>( 

 reference: T, 

 id: string, 

 exportName: null | string, 

 ): ServerReference<T> { 

 return Object.defineProperties((reference: any), { 

 $$typeof: {value: SERVER_REFERENCE_TAG}, 

 $$id: { 

 value: exportName === null ? id : id + '#' + exportName, 

 configurable: true, 

 }, 

 $$bound: {value: null, configurable: true}, 

 bind: {value: bind, configurable: true}, 

 }); 

 }

I still believe there's a need for an official way to identify client/server references, as currently I'm working with hardcoded Symbols — maybe through react-is or some other mechanism?

How did you test this change?

Basically wrote directly into react-server-dom-webpack-client.browser.development.js file of my nextjs project 🤷

Thank you for your time!

vercel · 2024-07-18T05:56:21Z

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	Jul 18, 2024 5:58am

react-sizebot · 2024-07-18T06:02:08Z

Comparing: 163365a...2994073

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	+0.05%	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	499.44 kB	499.44 kB	=	89.59 kB	89.59 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	504.26 kB	504.26 kB	=	90.30 kB	90.30 kB
facebook-www/ReactDOM-prod.classic.js	=	599.20 kB	599.20 kB	=	105.80 kB	105.80 kB
facebook-www/ReactDOM-prod.modern.js	=	573.37 kB	573.37 kB	=	101.68 kB	101.68 kB
test_utils/ReactAllWarnings.js	Deleted	64.07 kB	0.00 kB	Deleted	15.86 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-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js	+0.31%	45.97 kB	46.12 kB	+0.64%	9.46 kB	9.52 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js	+0.31%	45.97 kB	46.12 kB	+0.64%	9.46 kB	9.52 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js	+0.31%	45.97 kB	46.12 kB	+0.64%	9.46 kB	9.52 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js	+0.31%	46.48 kB	46.62 kB	+0.63%	9.53 kB	9.59 kB
oss-stable-rc/react-client/cjs/react-client-flight.production.js	+0.30%	51.82 kB	51.98 kB	+0.44%	9.64 kB	9.69 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js	+0.30%	51.82 kB	51.98 kB	+0.44%	9.64 kB	9.69 kB
oss-stable/react-client/cjs/react-client-flight.production.js	+0.30%	51.82 kB	51.98 kB	+0.44%	9.64 kB	9.69 kB
oss-experimental/react-client/cjs/react-client-flight.production.js	+0.30%	52.22 kB	52.38 kB	+0.43%	9.69 kB	9.73 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js	+0.30%	47.57 kB	47.71 kB	+0.66%	9.83 kB	9.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js	+0.30%	47.57 kB	47.71 kB	+0.66%	9.83 kB	9.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js	+0.30%	47.57 kB	47.71 kB	+0.66%	9.83 kB	9.89 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js	+0.30%	47.91 kB	48.05 kB	+0.64%	9.92 kB	9.98 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js	+0.30%	47.91 kB	48.05 kB	+0.64%	9.92 kB	9.98 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js	+0.30%	47.91 kB	48.05 kB	+0.64%	9.92 kB	9.98 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js	+0.30%	48.07 kB	48.21 kB	+0.64%	9.90 kB	9.96 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js	+0.29%	48.41 kB	48.55 kB	+0.64%	9.99 kB	10.05 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js	+0.29%	50.18 kB	50.32 kB	+0.44%	10.48 kB	10.52 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js	+0.29%	50.18 kB	50.32 kB	+0.44%	10.48 kB	10.52 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js	+0.29%	50.18 kB	50.32 kB	+0.44%	10.48 kB	10.52 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js	+0.28%	50.68 kB	50.82 kB	+0.42%	10.54 kB	10.59 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js	+0.28%	51.43 kB	51.57 kB	+0.41%	10.75 kB	10.80 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js	+0.28%	51.43 kB	51.57 kB	+0.41%	10.75 kB	10.80 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js	+0.28%	51.43 kB	51.57 kB	+0.41%	10.75 kB	10.80 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js	+0.28%	51.93 kB	52.08 kB	+0.43%	10.82 kB	10.86 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js	+0.28%	52.12 kB	52.26 kB	+0.44%	10.91 kB	10.95 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js	+0.28%	52.12 kB	52.26 kB	+0.44%	10.91 kB	10.95 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js	+0.28%	52.12 kB	52.26 kB	+0.44%	10.91 kB	10.95 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js	+0.27%	52.62 kB	52.77 kB	+0.42%	10.97 kB	11.02 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js	+0.27%	53.27 kB	53.41 kB	+0.41%	11.13 kB	11.18 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js	+0.27%	53.27 kB	53.41 kB	+0.41%	11.13 kB	11.18 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js	+0.27%	53.27 kB	53.41 kB	+0.41%	11.13 kB	11.18 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js	+0.27%	53.28 kB	53.42 kB	+0.41%	11.12 kB	11.16 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js	+0.27%	53.28 kB	53.42 kB	+0.41%	11.12 kB	11.16 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js	+0.27%	53.28 kB	53.42 kB	+0.41%	11.12 kB	11.16 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js	+0.27%	53.77 kB	53.91 kB	+0.43%	11.20 kB	11.25 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js	+0.27%	53.78 kB	53.92 kB	+0.43%	11.19 kB	11.23 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js	+0.26%	55.02 kB	55.16 kB	+0.41%	11.25 kB	11.30 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js	+0.26%	55.02 kB	55.16 kB	+0.41%	11.25 kB	11.30 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js	+0.26%	55.02 kB	55.16 kB	+0.41%	11.25 kB	11.30 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js	+0.26%	55.50 kB	55.64 kB	+0.40%	11.32 kB	11.37 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js	+0.26%	55.69 kB	55.84 kB	+0.41%	11.41 kB	11.46 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js	+0.26%	55.69 kB	55.84 kB	+0.41%	11.41 kB	11.46 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js	+0.26%	55.69 kB	55.84 kB	+0.41%	11.41 kB	11.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js	+0.26%	56.18 kB	56.32 kB	+0.41%	11.48 kB	11.53 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js	+0.24%	69.69 kB	69.86 kB	+0.36%	12.89 kB	12.94 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js	+0.24%	69.69 kB	69.86 kB	+0.36%	12.89 kB	12.94 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js	+0.24%	69.69 kB	69.86 kB	+0.36%	12.89 kB	12.94 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js	+0.23%	71.54 kB	71.70 kB	+0.52%	13.26 kB	13.33 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js	+0.23%	71.54 kB	71.70 kB	+0.52%	13.26 kB	13.33 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js	+0.23%	71.54 kB	71.70 kB	+0.52%	13.26 kB	13.33 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js	+0.23%	71.99 kB	72.15 kB	+0.37%	13.41 kB	13.46 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js	+0.23%	71.99 kB	72.15 kB	+0.37%	13.41 kB	13.46 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js	+0.23%	71.99 kB	72.15 kB	+0.37%	13.41 kB	13.46 kB
oss-stable-rc/react-client/cjs/react-client-flight.development.js	+0.23%	73.27 kB	73.44 kB	+0.23%	13.25 kB	13.28 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js	+0.23%	73.27 kB	73.44 kB	+0.23%	13.25 kB	13.28 kB
oss-stable/react-client/cjs/react-client-flight.development.js	+0.23%	73.27 kB	73.44 kB	+0.23%	13.25 kB	13.28 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js	+0.22%	74.63 kB	74.79 kB	+0.20%	13.97 kB	14.00 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js	+0.22%	74.63 kB	74.79 kB	+0.20%	13.97 kB	14.00 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js	+0.22%	74.63 kB	74.79 kB	+0.20%	13.97 kB	14.00 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js	+0.22%	76.04 kB	76.20 kB	+0.23%	14.28 kB	14.31 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js	+0.22%	76.04 kB	76.20 kB	+0.23%	14.28 kB	14.31 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js	+0.22%	76.04 kB	76.20 kB	+0.23%	14.28 kB	14.31 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js	+0.22%	75.82 kB	75.98 kB	+0.33%	14.38 kB	14.43 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js	+0.22%	76.84 kB	77.00 kB	+0.19%	14.45 kB	14.47 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js	+0.22%	76.84 kB	77.00 kB	+0.19%	14.45 kB	14.47 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js	+0.22%	76.84 kB	77.00 kB	+0.19%	14.45 kB	14.47 kB
oss-stable-rc/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js	+0.22%	76.26 kB	76.43 kB	+0.35%	16.25 kB	16.31 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js	+0.22%	76.26 kB	76.43 kB	+0.35%	16.25 kB	16.31 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js	+0.22%	76.26 kB	76.43 kB	+0.35%	16.25 kB	16.31 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js	+0.21%	77.00 kB	77.16 kB	+0.35%	16.35 kB	16.41 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js	+0.21%	78.20 kB	78.37 kB	+0.19%	14.69 kB	14.72 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js	+0.21%	78.20 kB	78.37 kB	+0.19%	14.69 kB	14.72 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js	+0.21%	78.20 kB	78.37 kB	+0.19%	14.69 kB	14.72 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js	+0.21%	78.22 kB	78.38 kB	+0.19%	14.67 kB	14.70 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js	+0.21%	78.22 kB	78.38 kB	+0.19%	14.67 kB	14.70 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js	+0.21%	78.22 kB	78.38 kB	+0.19%	14.67 kB	14.70 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js	+0.21%	77.66 kB	77.82 kB	+0.34%	14.79 kB	14.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js	+0.21%	78.11 kB	78.28 kB	+0.29%	14.91 kB	14.95 kB
oss-experimental/react-client/cjs/react-client-flight.development.js	+0.21%	79.55 kB	79.72 kB	+0.22%	14.68 kB	14.71 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js	+0.21%	79.92 kB	80.09 kB	+0.21%	14.79 kB	14.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js	+0.21%	79.92 kB	80.09 kB	+0.21%	14.79 kB	14.82 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js	+0.21%	79.92 kB	80.09 kB	+0.21%	14.79 kB	14.82 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js	+0.21%	80.71 kB	80.87 kB	+0.19%	14.97 kB	15.00 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js	+0.21%	80.71 kB	80.87 kB	+0.19%	14.97 kB	15.00 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js	+0.21%	80.71 kB	80.87 kB	+0.19%	14.97 kB	15.00 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js	+0.21%	80.75 kB	80.92 kB	+0.20%	15.40 kB	15.43 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js	+0.20%	82.16 kB	82.33 kB	+0.22%	15.72 kB	15.76 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js	+0.20%	82.96 kB	83.13 kB	+0.19%	15.89 kB	15.92 kB
test_utils/ReactAllWarnings.js	Deleted	64.07 kB	0.00 kB	Deleted	15.86 kB	0.00 kB

Generated by 🚫 dangerJS against 2994073

github-actions · 2024-10-20T14:04:36Z

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

kspeyanski · 2024-10-21T05:59:22Z

bump, i guess

WIP(react-client): add 70453typeof to server references

2994073

facebook-github-bot added the CLA Signed label Jul 18, 2024

vercel bot deployed to Preview July 18, 2024 05:58 View deployment

eps1lon requested a review from sebmarkbage July 22, 2024 13:35

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Oct 20, 2024

kspeyanski closed this Oct 21, 2024

kspeyanski reopened this Oct 21, 2024

github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RFC(react-client): add $$typeof to server references in Flight #30371

RFC(react-client): add $$typeof to server references in Flight #30371

kspeyanski commented Jul 18, 2024 •

edited

Loading

vercel bot commented Jul 18, 2024 •

edited

Loading

react-sizebot commented Jul 18, 2024

github-actions bot commented Oct 20, 2024

kspeyanski commented Oct 21, 2024

	export function registerServerReference<T: Function>(
	reference: T,
	id: string,
	exportName: null \| string,
	): ServerReference<T> {
	return Object.defineProperties((reference: any), {
	$$typeof: {value: SERVER_REFERENCE_TAG},
	$$id: {
	value: exportName === null ? id : id + '#' + exportName,
	configurable: true,
	},
	$$bound: {value: null, configurable: true},
	bind: {value: bind, configurable: true},
	});
	}

RFC(react-client): add $$typeof to server references in Flight #30371

Are you sure you want to change the base?

RFC(react-client): add $$typeof to server references in Flight #30371

Conversation

kspeyanski commented Jul 18, 2024 • edited Loading

Summary

How did you test this change?

Thank you for your time!

vercel bot commented Jul 18, 2024 • edited Loading

react-sizebot commented Jul 18, 2024

Critical size changes

Significant size changes

github-actions bot commented Oct 20, 2024

kspeyanski commented Oct 21, 2024

kspeyanski commented Jul 18, 2024 •

edited

Loading

vercel bot commented Jul 18, 2024 •

edited

Loading