vercel-composition-patterns

Refactor React components by replacing boolean prop proliferation with explicit composition patterns. Use compound components and context providers to decouple state from UI, creating composable variants that scale reliably in medium-to-large codebases.

Use compound components with shared context by lifting state into provider components. This allows subcomponents to receive state and actions via a provider instead of prop drilling, keeping UI elements independent from the underlying state implementation.

Structure context interfaces by defining generic contracts that separate state, actions, and meta. This keeps your UI independent from the state implementation and enables sibling or external UI elements to read and trigger actions safely.

This composition pattern applies React 19+ API guidance, preferring the use() hook over useContext() and treating ref as a regular prop rather than using forwardRef. It is designed for React 19+ usage rules.

Avoid boolean props in React component architecture when conditional modes cause unmaintainable logic and tangled state/UI coupling. Shift to explicit composed variants to resolve maintainability issues across medium-to-large codebases.