vercel-composition-patterns

Fix React component boolean prop explosion by replacing multi-flag components with explicit variants like ThreadComposer and EditMessageComposer, reusing shared parts and providers to maintain flexible UI architecture without conditional rendering complexity.

Build compound components in React by lifting state into context providers, allowing shared subcomponents to access necessary data without prop drilling, which cleanly structures architectures and enables maximum reuse across complex user interfaces.

Refactor large React codebases by creating explicit variant components such as ForwardMessageComposer that reuse shared parts and providers, implementing common UI patterns to replace boolean-controlled components and improve maintainability.

Explicit composition patterns work with React 19 APIs like use() and new patterns, ensuring compatibility when building reusable component libraries and implementing compound components with context providers across teams.

Use explicit component variants instead of boolean props in React when refactoring complex UIs, building reusable component libraries, or designing flexible APIs across teams to prevent maintenance issues from component variant proliferation.