vercel-composition-patterns

Use scalable composition patterns to refactor React components. Replace boolean props with explicit variant subcomponents like ThreadComposer, lift state into context providers exposing a generic state/actions/meta interface, and apply children-based composition for reusable UI.

The compound component pattern builds reusable React APIs where subcomponents share state via context instead of props. Use it when restructuring complex UI into composable subcomponents to eliminate unmaintainable boolean prop complexity and prevent impossible component states.

Yes, this approach aligns with React 19 compliance for context providers. It mandates applying the use() hook instead of useContext() for state management and treating ref as a normal prop when building compound component architectures.

Migrate React state management by lifting state into central provider components and exposing a consistent state/actions/meta context interface. This dependency-injected context allows interchangeable UIs to consume shared state without boolean prop drilling.

The best way to prevent impossible states in React component libraries is replacing multi-boolean mode components with clear, explicit variants. By applying compound component architecture and lifted provider state, you ensure only valid state combinations are expressible.