vercel-composition-patterns

Replace conditional flags with explicit variant components that compose a fixed set of UI parts. This composition pattern reduces API complexity and coupling, creating maintainable and reusable React component architectures.

The best way to manage shared state across compound components without prop drilling is using context-driven composition. A shared context and provider pattern lifts state, allowing child components to access it directly without passing props through every layer.

Refactor a React component library by applying explicit variant components, provider-based state management, and React 19 APIs. This involves replacing boolean flags with dedicated variants and lifting shared state into context providers to ensure scalable UI architecture.

Yes, this React composition approach works with the React 19 API. It enforces React 19 API guidance, specifically recommending the use() hook over useContext for reading context and avoiding forwardRef when building scalable component architectures.

You should not use compound components when a fixed set of UI parts cannot adequately express the required variations. If the component requires highly dynamic, unpredictable structures, explicit variant components and context providers may introduce unnecessary architectural coupling.