vercel-composition-patterns

To refactor React components with boolean prop proliferation, replace conditional toggles with explicit variant components and provider-backed contexts. This approach splits complex UIs into compound components, ensuring APIs remain predictable and maintainable as your codebase grows.

The compound component pattern in React splits complex UIs into a Provider and subcomponents that share a typed context. This structure defines explicit state, actions, and meta interfaces, allowing state to act as dependency injection for flexible implementations.

Manage shared state boundaries in a React component library by defining generic context interfaces as dependency injection. This allows identical UI components to function seamlessly with local, global, or synced state implementations without tight coupling.

Yes, this React composition pattern supports React 19 API adjustments. It provides specific guidance for replacing useContext with use and treating ref as a regular prop, ensuring your explicit variants and provider-backed contexts remain compatible.

Use explicit variant components instead of boolean props to document behavior and avoid impossible states. Defining distinct components like ThreadComposer or EditComposer prevents hidden conditional complexity and eliminates tight coupling between UI and state implementations.

Avoid boolean props for React component variants when facing unmaintainable conditional complexity or tight coupling. If your codebase requires reusable and predictable components, boolean prop proliferation creates hidden states that should be replaced with composition.