vercel-composition-patterns

Refactor React components with boolean prop proliferation by applying compound components and explicit variants. This pattern decouples state from UI and structures elements through composition, resulting in clearer and more maintainable code.

State management in scalable React component architecture is best handled by decoupling state from UI, defining generic context interfaces, and lifting state into context providers. This strategy improves code clarity and reusability.

Compound components improve React state management by structuring elements through composition rather than conditional logic. This approach prevents boolean prop proliferation, lifts state into providers, and uses explicit variants to enhance code clarity.

Yes, the React 19 use() API is supported for component composition. This Skill provides guidelines covering new API changes like use() and direct ref handling to improve implementation strategies and maintainability.

Prefer children over render props in React component architecture when building compound components to improve code clarity. This implementation pattern avoids complex conditional logic and promotes explicit component variants.

Yes, this approach works for refactoring a large UserProfile component. It guides transforming structures with many boolean flags like isEditing into a composable structure using compound components and explicit variants.