vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Create components like ThreadComposer or EditComposer that each compose the pieces they need from a compound component, eliminating conditional logic and impossible states.

Compound components are a pattern where a parent component shares state with its subcomponents through context instead of props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, accessing shared state via use(ComposerContext).

Prefer children for composing static structure because 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 siblings. Components inside the provider access state and actions through context, even when they are not visually nested inside the main component UI.