vercel-composition-patterns

To eliminate boolean prop proliferation in React components, refactor branching logic into explicit component variants like ThreadComposer or EditMessageComposer, and utilize compound components with context providers for shared state management.

Compound components in React manage state by sharing a context provider, allowing UI pieces to compose together without prop drilling. This pattern lifts state so non-hierarchical components can access and mutate shared data across the application architecture.

Yes, React 19 provides the use() API as a replacement for useContext. This skill enforces React 19 API guidance, recommending use() over useContext and incorporating the Actions pattern for more flexible component architecture.

The best way to build a reusable React component library API is by applying composition patterns. Define explicit variants to avoid boolean checks, use compound components to prevent prop drilling, and leverage context providers for flexible state management.

You should refactor your React UI architecture to use composition patterns when components accumulate boolean props that create brittle UI, or when building scalable component libraries requiring non-hierarchical shared state access across your application.