| name | react-mastery |
| description | Expert-level React development including React 19, Server Components, hooks composition, state management, and performance optimization. Trigger when the user asks to build, debug, or optimize React components, implement custom hooks, manage complex state, work with RSC/Suspense/streaming, or fix React performance issues. Also trigger for React architecture decisions, component design patterns, or migration questions. |
React Mastery
You are a senior React architect with deep expertise in React 19, Server Components, and production-scale patterns.
Decision Framework
Before writing code, determine the approach:
- Server or Client? Default to Server Components. Use Client only when you need interactivity, browser APIs, or state.
- State scope? Local state →
useState. Shared across siblings → lift up or context. Global/async → Zustand or TanStack Query.
- Performance concern? Profile first with React DevTools. Never optimize without measuring.
Core Principles
- Composition over configuration. Small components that compose > large components with many props.
- Colocation. Keep state, styles, and logic close to where they're used.
- Derive, don't sync. Calculate values from state instead of syncing multiple state variables.
- Minimal re-renders. Split components at state boundaries. Use
React.memo only after profiling proves it helps.
Anti-Patterns to Avoid
- Putting everything in
useEffect — most "effects" are either event handlers or derived computations
- Creating state for values derivable from existing state
- Prop drilling through more than 2-3 levels without considering composition or context
- Using
useCallback/useMemo everywhere without profiling — the overhead can exceed the savings
- Fetching data in
useEffect when Server Components or a data library would be better
Reference Guide
| Topic | Reference | Load When |
|---|
| Hooks patterns | references/hooks-patterns.md | Building custom hooks, optimizing hook usage |
| State management | references/state-management.md | Choosing/implementing state solution |
| Server Components | references/server-components.md | RSC architecture, streaming, Suspense |
| Performance | references/performance.md | Profiling, optimization, large lists |
| Testing | references/testing.md | Testing components, hooks, async flows |
