vercel-composition-patterns

Compound components in React let you compose complex UIs from independent child parts sharing implicit state. This pattern uses context providers to pass data internally, avoiding prop drilling and making the component API more predictable and extensible.

You refactor React components into scalable composition patterns by identifying components with excessive boolean props, extracting sub-components, lifting shared state, and connecting them via context providers to create a predictable and extensible API surface.

These composition patterns are designed for building reusable React component libraries and scalable APIs. They apply to any app or library needing compound components, render props, and context providers to scale UI while preserving predictable behavior.

For large component libraries, avoid overusing render props and excessive boolean props by applying targeted compound components and context providers. Overusing these patterns can introduce unnecessary complexity when simpler component composition would suffice.