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 hidden conditionals 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.Input and Composer.Submit explicitly, accessing shared state via use(ComposerContext) without prop drilling.

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 a List component providing item data to renderItem.

In React 19, forwardRef is unnecessary because ref is now a regular prop you can destructure directly in function components. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

Lift state into a provider component that wraps the entire subtree. Any component inside the provider boundary, even siblings outside the main UI like dialog action buttons, can access state and actions through context without prop drilling or refs.