vercel-composition-patterns

To avoid boolean prop proliferation in React components, replace mode booleans with explicit, composition-based variant components. This reduces conditional complexity and prevents unmaintainable variant multiplication in scalable component libraries.

The best way to manage shared state in compound components without prop drilling is lifting state into context provider boundaries. Using a generic context contract for state, actions, and meta keeps the UI decoupled from implementation details.

Yes, this React component refactoring approach works with React 19 and leverages its new APIs. It enforces React 19+ usage rules by preferring the use() hook over useContext() and treating ref as a regular prop instead of using forwardRef.

To refactor a React component to use dependency-injected state, restructure shared state into a provider-backed compound component API. This involves defining generic state, action, and meta context contracts within provider boundaries to decouple UI from state implementation.

You should use compound components with shared context when your React component APIs become unmaintainable due to tight state coupling and multiplying variants. This pattern allows consumers to compose only the parts they need without prop drilling.