vercel-composition-patterns

Refactor React components by replacing boolean props with explicit variant components and sharing state via context providers. This compound component architecture eliminates hidden conditional rendering and stops prop drilling, making component behavior easier to reason about and reuse.

The compound component pattern builds component parts that share state via context instead of prop drilling. Use it when a component grows many boolean flags or hidden conditional rendering, making behavior hard to reason about and reuse in your React codebase.

Lift state management into context provider boundaries so sibling or external UI can read state and call actions. Define a consistent state, actions, and meta interface contract so the same UI works with different implementations.

React 19 alignment uses the use() hook instead of useContext() and treats ref as a regular prop. While the compound component pattern works in older versions, following React 19 requirements ensures your refactored component APIs meet modern expectations.

Explicit variants replace one component with many flags by creating dedicated variant components that compose only what they need. This prevents hidden conditional rendering and makes component behavior explicit, avoiding the unmaintainable prop chaos of boolean modes.

Prefer composing children over render props when refactoring React component APIs. Composing children alongside a dependency-injected context contract creates a cleaner, more maintainable interface than render-prop APIs, which often lead to hidden conditional rendering and prop chaos.