[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.