[React 19] RSC and `as` property pattern

[FezVrasta]

Summary

Many UI libraries adopt the as property pattern, especially for the Icon component.

<Icon as={ArrowIcon} />

This pattern is currently unsupported by server components, and requires to manually define client components for each icon one decides to use.

Is there a suggested alternative pattern the React team would like to promote? If not, do you think passing components as properties could be supported? In theory a component could be serialized (to a pointer) and then sent over HTTP, then the client could either dynamically import it, or the bundler could statically analyze it and bundle it on the client side code.

Alternatively, when a component is passed as property, the server component could inline the child component so that they are forced to be render together.

[tom-sherman]

In the majority of cases (11/18) this pattern continues to work. See tables below.

Server execution context

eg. a Next.js page.tsx and any non-client imports

	Shared <Icon>	Client <Icon>	Server <Icon>
Shared <ArrowIcon>	✅	❌	✅
Client <ArrowIcon>	✅	✅	✅
Server <ArrowIcon>	✅	❌	✅

Client execution context

eg. a "use client" module or any imported imports

	Shared <Icon>	Client <Icon>	Server <Icon>
Shared <ArrowIcon>	✅	✅	❌
Client <ArrowIcon>	✅	✅	❌
Server <ArrowIcon>	❌	❌	❌

Commentary

• If <Icon> is a shared component, the pattern works in all cases except when in a client context and the as prop is a server component. This doesn't work because you can't import and render a server component into a client context.
• A server Icon always works in a server context but it can never work in a client context because of the same constraint
• A client Icon can only work in a server context when the as prop is also a client component.
• In a client context only, a client Icon can have a shared as prop

In my opinion there's nothing that React should do here. The pattern continues to work in the majority of cases, especially if Icon is a shared component.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[FezVrasta]

Don't close this issue. This is an automatic message by Fresh - a bot against stale bots.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!