vercel-composition-patterns

To reduce boolean prop explosion in React components, replace booleans with explicit variants, compound components, and shared context. This approach prevents the combinatorial complexity that complicates reuse and keeps architecture self-documenting.

Building compound components with shared state in React is best achieved by composing small UI parts that read from a shared provider. This state lifting and dependency injection technique moves state into providers, reducing prop drilling and keeping UI components implementation-agnostic.

Refactoring a large React component tree to use explicit variants involves creating distinct components like ThreadComposer and EditMessageComposer instead of overloading a single component with booleans. This separates concerns and improves API flexibility across large user interfaces.

React composition patterns usage in this context avoids forwardRef entirely. It enforces React 19 API conventions, specifically utilizing the use() hook instead of useContext for shared state, to simplify component APIs and modernize state management.

You should use explicit variants over boolean props in React when designing reusable component APIs or scaling UI systems. Explicit variants prevent invalid component states and make the architecture self-documenting, whereas boolean props create complex, hard-to-maintain combinations.