react-patterns
Installation
SKILL.md
Quick Reference
| Pattern | Use Case | Example |
|---|---|---|
| Compound Components | Related components sharing state | <Tabs><Tab /><Panel /></Tabs> |
| Render Props | Dynamic rendering with shared logic | <Mouse>{({x,y}) => ...}</Mouse> |
| HOC | Cross-cutting concerns | withAuth(Component) |
| Custom Hooks | Stateful logic reuse | useToggle(), useDebounce() |
| Provider Pattern | Global/shared state | <CartProvider>...</CartProvider> |
| Controlled/Uncontrolled | Form input flexibility | value vs defaultValue |
| Prop Getters | Accessible component APIs | getButtonProps() |
| State Reducer | Customizable state logic | useReducer(customReducer) |