vercel-composition-patterns

Refactor React components by replacing boolean props with explicit variant components sharing a lifted context provider. This eliminates brittle conditional logic and maintains UI flexibility as features grow.

The compound component pattern uses shared context so subcomponents access state and actions without prop drilling. Use it when building reusable UI libraries or compound component systems to keep APIs clean and composable.

Lift state into context providers by moving state ownership into provider components with dependency-injected context interfaces for state, actions, and meta. This allows sibling or external UI to share and modify state reliably.

Yes, this approach aligns with React 19 APIs by applying the use() pattern for context access and treating ref as a regular prop. It ensures refactored compound components follow current React guidance.

Prefer children over render props to improve readability and composition ergonomics for reusable component APIs. Render props can create readability friction, while children offer cleaner composition.

Explicit component variants replace ambiguous mode props to avoid conditional render paths and boolean prop proliferation. Named variants like ThreadComposer or EditComposer provide clearer, more maintainable APIs.