vercel-composition-patterns

Boolean prop proliferation causes combinatorial variant explosion in React components. Apply composition patterns like compound components, render props, context providers, and explicit variant components to build scalable, maintainable, and reusable UI APIs.

Compound components share state in React by using context providers to distribute data and actions to child components. This eliminates prop drilling and allows UI elements outside the main frame to access necessary state directly.

React 19 eliminates the need for forwardRef in composition patterns, allowing regular ref props. It also introduces the use() hook to replace useContext for accessing context providers within compound components.

Use explicit variant components instead of boolean props when building reusable UI primitives or refactoring component libraries. Variants like ThreadComposer or EditMessageComposer create self-documenting APIs that prevent combinatorial state explosion.

Lift state into context providers to share actions and data across React UI components. This composition pattern enables elements outside the main component frame to access state directly, preventing prop drilling and ensuring scalable architecture.

Yes, render props can be used with React 19 context providers. This composition pattern works alongside the new use() API and regular ref props to create flexible, reusable component APIs without needing forwardRef.