vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Create separate components like ThreadComposer or EditComposer, each composing the pieces it needs from a compound component structure instead of passing flags to one monolithic component.

Compound components are a set of subcomponents sharing state through a common context rather than props. Consumers compose the pieces they need, such as Composer.Frame, Composer.Input, and Composer.Submit, with no hidden conditionals or prop drilling.

Use children when composing static structure because they are more readable and compose naturally. Reserve render props for cases where 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 you can accept it directly in the function signature without the forwardRef wrapper. React 19 also replaces useContext() with the use() hook, which can be called conditionally.

Lift state into a provider component that wraps the entire subtree. Any component inside the provider boundary, even siblings outside the main UI like dialog action buttons, can access state and actions through the shared context.