vercel-composition-patterns

Refactor React components by replacing boolean props and conditional rendering with explicit composition patterns. Break monolithic APIs into compound components that share state through context providers, eliminating impossible states and reducing prop bloat.

Manage shared state in compound components by lifting it into context providers. This grants sibling subcomponents, previews, and action buttons direct access to shared data and actions without prop drilling, enforcing clear context contracts.

Replace boolean mode flags with explicit variants by creating distinct components for thread, edit, and forward flows instead of one component with many modes. This eliminates tangled conditional logic and prevents invalid configuration combinations.

This approach works with React 19 by applying modern context and ref patterns. It guides codebases through React 19 migration tasks, ensuring compound components and context providers align with updated framework APIs.

Use compound components over render props when you need explicit, composable APIs. This pattern favors children-based composition over render props, lifting state into providers to create flexible React APIs without prop bloat.