vercel-composition-patterns

Refactor React components to eliminate boolean prop proliferation by replacing stacked booleans with explicit compound components and provider-driven state. This technique splits monolithic APIs into composable structures, preserving state ownership while removing brittle render props and tightly coupled state.

The best way to manage shared state in compound React components is provider-based state lifting. Moving state into context providers allows sibling UI components to read and update data without prop drilling, creating clearer and more reusable component structures.

Create explicit variants in React by building separate components for distinct flows like thread, edit, and forward, instead of stacking boolean props. This refactoring approach turns tightly coupled, monolithic component APIs into clearer, composable structures.

Yes, you can apply React 19-compatible ref and context conventions when refactoring component APIs. This approach requires preserved state ownership and dependency-injected context contracts to ensure modern ref and context usage works correctly in updated codebases.

Use children-based composition in reusable React UI libraries when splitting complex widgets into explicit parts that share context. This pattern prevents brittle boolean props and render props, turning monolithic structures into maintainable, extensible components.

Prop drilling makes React components brittle and hard to maintain because it creates tightly coupled state and monolithic APIs. Refactoring these components to use shared context providers and compound components eliminates boolean prop proliferation and improves reusability.