vercel-composition-patterns

Replace boolean props with explicit component variants that compose shared internals. Create separate components like ThreadComposer or EditComposer, each composing only the pieces it needs from a compound component structure, eliminating hidden conditionals.

Compound components are a pattern where a parent component shares state with subcomponents through context rather than props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, accessing shared state via context.

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

No, React 19 makes ref a regular prop, so forwardRef is unnecessary. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

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

Compound components add indirection that may be unnecessary for simple, single-purpose components with few variants. The patterns target complex components with multiple modes or shared state across sibling UI elements.