vercel-composition-patterns

To eliminate boolean prop proliferation in React components, refactor monolithic APIs into compound components and lift shared state into context providers. This approach replaces tangled conditional rendering with explicit, composable building blocks that consumers assemble directly.

The best way to share state across sibling UI components without prop drilling is lifting state into context providers. Define standardized state, actions, and meta context contracts so multiple providers can drive the same UI elements seamlessly.

You should use compound components instead of render props when you need flexible UI composition without rigid API structures. Composing children directly provides a cleaner, more self-documenting API compared to render props, especially for design-system components.

Yes, this composition approach works with React 19 by applying updated patterns for refs and context usage. It provides specific guidance for leveraging the React 19 ref and use APIs when refactoring reusable component libraries and design-system elements.

To replace boolean mode props with explicit variants in a design system, refactor rigid UI modes into self-documenting component variants such as thread, edit, and forward flows. This creates clear, distinct component APIs instead of relying on tangled conditional rendering.