vercel-composition-patterns

To avoid boolean prop proliferation in React components, refactor mode-heavy props into explicit, self-documenting variants using compound component patterns and shared context. This replaces fragile configuration props with scalable component composition.

The best way to share state across sibling React components without prop drilling is to lift the state into a context provider. This allows sibling or external UI elements to access the same state and actions directly via context.

Compound components with shared context in React 19 work by building flexible subcomponent structures where internal parts consume shared state, actions, and meta. React 19 conventions use the use() hook instead of useContext() for context access.

Yes, you need React 19 to use the use() hook for context access. This skill aligns with React 19+ conventions, using use() instead of useContext() and treating ref as a regular prop for composition-driven interfaces.

You should use compound components instead of render props in React when you want to eliminate render-prop patterns and enable scalable composition. This approach uses explicit variants and lifted state to create self-documenting component APIs.

Yes, you can treat ref as a regular prop when refactoring React component architecture. React 19 supports regular prop-based ref handling, allowing you to build composition-driven interfaces without awkward ref forwarding.