vercel-composition-patterns

Avoid boolean prop proliferation in React components by using compound components to split monolithic UIs into smaller, composable pieces like `UserProfileHeader` and `UserProfileDetails` that manage their own state and logic independently.

Decouple state management from React UI by lifting state into context providers and defining generic context interfaces. This pattern separates state logic from rendering, making components more flexible and maintainable across your codebase.

Refactor a monolithic React component by breaking it down into smaller, composable parts using compound components. Replace complex boolean flags with explicit component variants and prefer children composition over render props for better architecture.

Yes, the composition patterns support React 19 APIs, specifically covering how to use the new `use()` hook for context consumption and how to handle refs as regular props without needing forwardRef wrappers.

Use compound components instead of render props when you want to achieve better composition and readability. Preferring children composition over render props prevents prop drilling and creates more maintainable component architecture.

Context providers effectively decouple state from UI but require defining generic context interfaces to prevent unnecessary re-renders. Heavy reliance on context can complicate dependency injection if not carefully structured within your component architecture.