React Patterns & Best PracticesEntry 9 of 10
Choosing a Pattern
A guide to when each reuse pattern fits.
Notes
| Need | React pattern | Angular equivalent |
|---|---|---|
| Share logic between components | Custom hook | Service / function with signals |
| Related parts sharing state, consumer controls markup | Compound components | Projection + parent injection |
| Component owns logic, consumer controls item markup | Render props | ng-template + ngTemplateOutlet |
| Wrap a native element flexibly | Prop forwarding | Host attributes / attribute selector |
| Configure many variations of one thing | Props (keep them few) | Inputs |
Best practices:
- Start with plain props. Reach for a pattern only when the props list grows or the consumer needs control over structure.
- Keep context scoped to the compound component; don't make it global.
- Throw descriptive errors from context hooks when a child is used in the wrong place.
- Use stable, unique keys; never the index for lists that filter, sort, or reorder.
- Debounce input that triggers expensive work or requests.