vercel-composition-patterns

Refactor React components with excessive boolean props by breaking them into explicit composition patterns like compound components backed by a provider and context. This replaces rigid conditional logic with flexible, reusable variants.

Manage shared state without prop drilling by using provider-based state management with React context. Sibling UI components can access shared state directly through context providers instead of passing props down the tree.

Compound components in React share state through context instead of props. They allow sibling UI elements to coordinate internally, making reusable UI libraries more flexible and avoiding rigid, tightly-coupled parent-child structures.

Yes, this approach supports React 19 by treating ref as a normal prop and using the use hook for context access. It provides specific guidance for modern context handling and dependency-injected state contracts.

Use children-based composition instead of render props to achieve clearer component structure. This pattern simplifies variant design for components like dialog and thread composers, making their behavior explicit and easier to maintain.

Monolithic React composers duplicate state handling because they rely on excessive boolean props and hidden conditional logic. Refactoring them into explicit, reusable variants with shared internals via context providers eliminates this duplication.