vercel-composition-patterns

Refactor React components with boolean props by replacing them with explicit variant components like ThreadComposer or EditMessageComposer. This reduces configuration complexity and maintenance costs by promoting composition over multiple conditional flags.

The best way to share state across compound components is using a shared context provider with generic interfaces. This approach decouples UI from state management by enabling dependency injection for state, actions, and meta across the component tree.

React 19 API changes impact component composition patterns by providing updated guidance for scalable component libraries. The Skill offers practical patterns to modernize architecture using render props and context providers while maintaining compatibility with React 18+.

Yes, you can use render props and context providers to decouple React UI from state management. This pattern utilizes generic context interfaces for state, actions, and meta to enable cross-component sharing without tight coupling.

You should replace a large React component with explicit variant components when boolean prop proliferation causes rendering complexity. Identifying multi-flag components and splitting them into distinct variants reduces maintenance costs and simplifies the reusable API.

The Skill requires no external dependencies to refactor component libraries. It provides architectural guidance using built-in React features like context providers and composition patterns to modernize large codebases across React 18+ and React 19.