vercel-composition-patterns

Avoid boolean prop proliferation in React components by adopting compound components and explicit variants. This composition pattern decouples state logic, creating maintainable structures that scale easily for humans and AI agents.

Decouple React state management from UI by lifting state into providers and preferring children composition over render props. This separates logic from presentation, yielding a more flexible and maintainable component architecture.

Compound components improve React architecture by enabling flexible composition without complex boolean props. They allow explicit variants and internal state sharing, resulting in cleaner APIs and more maintainable component libraries.

Yes, these React composition patterns include updates for React 19 APIs like the use() hook and ref handling. These guidelines ensure component architecture remains compatible with the latest React framework features.

Use explicit component variants over render props in React when you need clearer API design and better maintainability. Preferring children composition simplifies component architecture and reduces complexity for library creation.