vercel-composition-patterns

Replace boolean props in React by refactoring monolithic components into explicit variant components composed from small, testable parts using compound components and context providers. This avoids prop drilling and creates flexible, maintainable APIs for reusable UI libraries.

Lift state via context providers in React when you need to reuse state across UI boundaries within a component library. State lifting enables flexible composition by allowing multiple compound components to access and share state without prop drilling through intermediate components.

Structure explicit variants in a React design system by replacing complex boolean-flag components with distinct, composable variant components. This approach enforces clear APIs, improves maintainability, and allows components to be composed from small, testable parts rather than relying on conditional logic.

Yes, this React composition guidance covers React 19 API practices for use() and ref handling. It provides clear implementation guidance on safely applying modern React 19 APIs alongside context providers, explicit variants, and state lifting techniques in component libraries.

Prop proliferation makes React component libraries hard to maintain because accumulating boolean flags creates complex, conditional component logic that is difficult to test and reuse. Applying composable patterns like compound components and explicit variants replaces this complexity with flexible, maintainable APIs.