vercel-composition-patterns

To refactor React components with boolean prop proliferation, extract shared state and actions into a context provider, then compose UI through compound subcomponents that consume state explicitly instead of toggling behavior with boolean props. Use explicit variants to render only relevant UI per mode.

The best way to share state across compound components is lifting it into a provider component that exposes a generic context interface of state, actions, and meta. Sibling subcomponents then consume this shared context directly instead of receiving data through prop drilling.

Use compound components with children-based composition for cleaner React APIs when you need to compose UI elements together. Reserve render props only for cases where data needs to flow downward to children, as children-based composition provides a more maintainable and scalable API.

React 19 changes context providers and refs by allowing you to use the use() hook for context access instead of useContext, and treats ref as a regular prop rather than requiring forwardRef. This simplifies wiring shared state through provider components in compound component architectures.

Yes, you can decouple React component UI from state implementation by defining a generic context interface with state, actions, and meta. This dependency-injected provider pattern lets the same components work seamlessly with local state, global synced state, or server-driven data.

React components become hard to maintain when boolean props proliferate because they create combinatorial complexity in behavior logic. Refactoring toward composition-based design with explicit variants ensures components render only the UI and actions relevant to a given mode, reducing unexpected state combinations.