vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer declares exactly what it renders, eliminating exponential state combinations and hidden conditionals.

Compound components are subcomponents sharing a common context, exported together (e.g., Composer.Frame, Composer.Input, Composer.Submit). Consumers compose only the pieces they need, and subcomponents access shared state via context instead of props.

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent must pass data back to the child, such as rendering list items with per-item data.

No. In React 19, ref is a regular prop, so function components can accept ref directly without the forwardRef wrapper. The use() hook also replaces useContext() and can be called conditionally.

Lift state into a provider component that wraps the UI tree. Any component inside the provider boundary, even siblings outside the main component's visual frame, can access state and actions through context without prop drilling or refs.

Compound components add context and provider overhead, so they are unnecessary for simple components with few variations. They pay off when a component has multiple variants, shared state across subcomponents, or needs swappable state implementations.