React patterns recommended
Compound Components Pattern
The Compound Components pattern creates flexible, declarative component APIs where parent and children work together implicitly. Used by Radix UI, Headless UI, and other modern component libraries.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Compound Components: Parent manages state, children consume via Context. Pattern: <Select><Select.Trigger/><Select.Content><Select.Item/></Select.Content></Select>. Use React.Children or Context API. Benefits: flexible API, implicit state sharing, declarative usage. See Radix UI, Headless UI for examples.
Use When
- Building reusable component libraries
- Complex components with multiple related parts
- Need flexible, declarative component APIs
- Components that share implicit state
Skip When
- Simple components with few props
- No shared state between children
- Performance-critical hot paths
Compound Components Pattern
The Compound Components pattern creates flexible, declarative component APIs where parent and children work together implicitly. Used by Radix UI, Headless UI, and other modern component libraries.