majiayu000 Frontend Patterns
Purpose
Component design patterns for maintainable frontend architecture. Patterns are universal; implementations differ by framework.
Core Patterns Overview
| Pattern | Concept | When to Use |
|---|---|---|
| Container/Presentational | Separate logic from UI | Data fetching + display |
| Custom Hooks (React) | Reusable stateful logic | Shared behavior across components |
| Composition | Build complex from simple | Flexible, reusable components |
| State Management | Organize application data | Local → Shared → Global |
Container/Presentational Pattern
Key Principle: Separate concerns
| Container (Logic) | Presentational (UI) |
|---|---|
| Fetches data | Receives data via props |
| Manages state | Stateless (ideally) |
| Handles events | Calls callback props |
| No styling | All styling lives here |
Application Rule:
- Start with Presentational (UI only, props-driven)
- Add Container when logic is needed
- Extract to custom hooks when reusable
Hooks Guidelines (React)
| Hook | Use For | Pitfall to Avoid |
|---|---|---|
| useEffect | Side effects | Missing dependencies |
| useMemo | Expensive computations | Premature optimization |
| useCallback | Stable function refs | Over-memoization |
| Custom hooks | Reusable logic | Not starting with use |
Dependencies Rule: Always include all values used inside the effect.
State Management Strategy
| Scope | Tool (React) | Example |
|---|---|---|
| Local | useState | Form input, toggle |
| Shared | Context | Theme, auth status |
| Global | Zustand/Redux | App-wide cache |
Granularity Rule: Split large state objects into separate states.
Composition Patterns
| Pattern | Use Case |
|---|---|
| children | Wrapper components, cards, modals |
| render props | Dynamic rendering based on data |
| HOC | Cross-cutting concerns (auth, logging) |
Framework Comparison
| Pattern | React | Vue | Angular |
|---|---|---|---|
| Separation | Container/Presentational | Composition API | Smart/Dumb |
| State | useState, Context | ref, reactive | Services |
| Side effects | useEffect | watch, onMounted | ngOnInit |
| Slots | children | slots | ng-content |
When NOT to Use Patterns
- Simple one-off components
- Prototypes (YAGNI)
- No reuse expected
Rule: Add patterns when pain is felt, not anticipated.
References
Principles (rules/)
- @~/.claude/rules/development/CONTAINER_PRESENTATIONAL.md - Component separation pattern
Skill References
- @./references/container-presentational.md - Detailed separation guide
Related Skills
frontend-design(official) - Visual design quality (typography, color, animation)enhancing-progressively- CSS-first progressive enhancementintegrating-storybook- Component visualization
Used by Commands
/code --frontend- React component implementation/audit- Frontend pattern verification
See Also
/example-skills:frontend-design- Official skill for distinctive UI aesthetics