vercel-composition-patterns

To eliminate boolean prop proliferation, refactor React components into explicit variants that share state through context providers. This approach replaces monolithic components with composable subcomponents, avoiding impossible prop combinations and making the API self-documenting.

The best way to share state across sibling UI elements in React 19 is by lifting state and actions into a context provider. This allows sibling components to access shared data without prop drilling, using the React 19 use() API instead of useContext().

Compound components work by combining a context provider with composable subcomponents. State is lifted into the provider, allowing sibling UI elements to share data and actions directly without prop drilling or tangled monolithic component boundaries.

You should use explicit variants over boolean modes when your component API has many boolean props that create impossible combinations. Creating self-documenting variant components improves maintainability and makes the codebase safer to extend as features scale.

No, React 19 does not require forwardRef for component composition. You can treat ref as a regular prop. Additionally, React 19 introduces the use() API, which replaces useContext() for consuming context in compound components.

Yes, you can prefer children-based composition over render props where appropriate in React 19. This refactoring technique simplifies component APIs and improves maintainability by leveraging standard children passing alongside context providers.