vercel-composition-patterns

Refactor React components with excessive boolean props by replacing conditional logic with explicit, composable variants like ThreadComposer or EditMessageComposer. This composition pattern separates concerns, giving each component a clear purpose and independent state management for better maintainability.

Compound components in React are an architecture pattern combining smaller, explicit sub-components into a flexible UI. Use them to decouple state management and avoid prop drilling, allowing parent components to share context implicitly without passing multiple boolean props down the tree.

React 19 API changes introduce specific patterns for handling refs and context, moving away from forwardRef and updating how context is provided. This Skill provides targeted guidelines to adapt your component architecture and define generic context interfaces using these new APIs.

The best way to decouple state management in scalable React components is lifting state effectively and defining generic context interfaces. This isolates state logic from presentational components, preventing monolithic structures and ensuring each component variant manages its own state independently.

Yes, these React composition patterns are fully compatible with TypeScript. The Skill provides guidelines for defining generic context interfaces and typing explicit component variants, ensuring your decoupled state management and compound components remain strictly type-safe.