vercel-composition-patterns

You replace boolean props by applying explicit variants, compound components, and context providers to decouple UI from state. This keeps component behavior explicit and self-documenting while preventing prop drilling.

Explicit variants are distinct components for specific UI flows like ThreadComposer or EditMessageComposer. They keep behavior self-documenting by avoiding boolean prop combinations and making component APIs predictable.

Compound components with shared context stop prop drilling by lifting state to providers and letting child components consume it directly. This decouples state implementation from UI rendering and enables reusable component assembly.

Yes, this approach adopts React 19 conventions by using the use() hook for context access instead of useContext and treating ref as a regular prop. This modernizes component architecture and simplifies context consumption.

You should refactor to composition patterns when boolean prop proliferation makes component APIs hard to maintain. Adopting context providers and explicit variants restores scalability and decouples UI from state implementation.

The best way to decouple UI from state is lifting state to context providers and assembling UI with compound components. This provider-based architecture makes UI components reusable and independent of state implementation.