vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared subcomponents through a common context instead of passing conditional flags to one monolithic component.

Compound components are a pattern where a parent component shares state via context with its subcomponents, such as Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose exactly the pieces they need without prop drilling or hidden conditionals.

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, React 19 makes ref a regular prop, so forwardRef is no longer needed. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

Lift state into a provider component that wraps the shared subtree. Any component inside the provider boundary can access state and actions via context, even if it sits outside the main component's visual structure.