vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared subcomponents through a compound component structure, eliminating conditional logic and impossible states.

Compound components are a pattern where a parent component shares state with its subcomponents through context rather than props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, gaining flexible layouts without prop drilling.

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, React 19 treats ref as a regular prop, so forwardRef wrappers are unnecessary. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds while keeping UI decoupled from state implementation.