vercel-composition-patterns

Refactor React components by replacing boolean-prop-driven combinatorial complexity with explicit composition-based variants. This approach uses compound component APIs and lifts state into context providers to improve maintainability and scalability.

Lift state into provider boundaries to share state across sibling React components without prop drilling. Inject state through a generic context interface defining state, actions, and meta contracts, allowing siblings to read and act on shared data.

Compound components in React 19 work by building reusable APIs where subcomponents consume shared state via a provider-backed context contract. They use the `use()` hook instead of `useContext()` and treat `ref` as a regular prop rather than relying on `forwardRef`.

Prefer children composition over render props for clearer React component APIs unless you need to pass render-prop data back to the parent. Using children composition reduces complexity and improves the maintainability of your component architecture.

Yes, React 19+ allows treating `ref` as a regular prop without relying on `forwardRef`. This skill applies React 19+ practices during refactoring, including using `use()` instead of `useContext()` for context consumption.

Avoid boolean props in React component design when behavior is controlled by many hidden conditionals, causing unmaintainable combinatorial complexity. Redesigning with explicit variants and compound components improves long-term scalability for teams and AI-assisted code changes.