vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound components such as Composer.Frame, Composer.Input, and Composer.Footer, eliminating conditional logic.

Compound components are a pattern where a parent component and its subcomponents share state through context instead of props. Consumers compose the pieces they need, such as Composer.Input and Composer.Submit, without 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, React 19 makes ref a regular prop, so forwardRef is no longer needed. The skill also recommends using the use() hook instead of useContext(), which additionally supports conditional calls.

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