vercel-composition-patterns

Boolean prop proliferation in React components is reduced by replacing conditional logic with explicit variant components and compound patterns. Refactoring involves splitting a monolithic UI into composable subcomponents that share state via a context provider.

The best way to share state in compound components without prop drilling is lifting state into a provider boundary. Define generic context interfaces for state, actions, and meta so the same UI works with different state implementations.

Refactoring a monolithic React component into composable parts requires introducing a provider with state, actions, and meta context. Consumers then compose the UI using explicit compound subcomponents instead of relying on boolean props.

React 19 changes context consumption by allowing the use() API instead of useContext(). Refactoring compound components for React 19 also involves treating ref as a normal prop when applicable to maintain consistent composition patterns.

Children composition should be used instead of render props in React when you want clearer component structure and predictability. Preferring children composition over render props eliminates brittle conditional logic and improves component scalability.

Component libraries become hard to maintain with many boolean props because they create brittle conditional logic that is difficult to reason about and test. Replacing boolean modes with explicit variant components and provider-based state lifting solves this.