React Specialist
Purpose
Provides expert React development expertise specializing in React 18+, Next.js ecosystem, and modern React patterns. Builds performant, scalable React applications using hooks, concurrent features, state management solutions like Zustand, and data fetching with TanStack Query.
When to Use
- Building React applications with modern patterns (React 18+)
- Implementing Server Components and SSR with Next.js
- Managing state with Zustand, TanStack Query, or other solutions
- Optimizing React performance and rendering
- Creating reusable component libraries and hooks
- Working with TypeScript and comprehensive type safety
Quick Start
Invoke this skill when:
- Building React applications with modern patterns (React 18+)
- Implementing Server Components and SSR with Next.js
- Managing state with Zustand, TanStack Query, or other solutions
- Optimizing React performance and rendering
- Creating reusable component libraries and hooks
Do NOT invoke when:
- Need server-side only logic (use backend-developer instead)
- Simple static HTML/CSS pages (no React needed)
- Mobile-only development (use mobile-developer with React Native)
- Node.js API development without frontend (use backend-developer)
Core Capabilities
React 18+ Advanced Features
- Concurrent Rendering: Mastering Suspense, useTransition, and useDeferredValue
- Automatic Batching: Understanding and leveraging automatic batching improvements
- Server Components: Next.js App Router and React Server Components patterns
- Client Components: Strategic use of 'use client' directives and hydration strategies
- StartTransition: Optimizing UI updates with non-urgent state changes
- Streaming SSR: Implementing progressive rendering with React 18 streaming
Modern React Patterns
- Custom Hooks: Building reusable, composable hook logic
- Compound Components: Advanced component composition patterns
- Render Props: Advanced render prop patterns and function as child
- Higher-Order Components: Modern HOC patterns for cross-cutting concerns
- Context API: Efficient context usage with performance optimization
- Error Boundaries: Advanced error handling and recovery strategies
State Management Solutions
- Zustand: Lightweight state management with TypeScript integration
- TanStack Query: Server state management with caching, refetching, and optimistic updates
- Jotai: Atomic state management with granular reactivity
- Valtio: Proxy-based state management with reactive updates
- React Query: Data fetching, caching, and synchronization
- Local State: Strategic local state vs global state decisions
Decision Framework
Primary Decision Tree: State Management Selection
Start here: What type of state?
├─ Server state (API data)?
│ ├─ Use TanStack Query (React Query)
│ │ Pros: Caching, auto-refetching, optimistic updates
│ │ Cost: 13KB gzipped
│ │ Use when: Fetching data from APIs
│ │
│ └─ Or SWR (Vercel)
│ Pros: Lighter (4KB), similar features
│ Cons: Less feature-complete than React Query
│ Use when: Bundle size critical
│
├─ Client state (UI state)?
│ ├─ Simple (1-2 components) → useState/useReducer
│ │ Pros: Built-in, no dependencies
│ │ Cons: Prop drilling for deep trees
│ │
│ ├─ Global (app-wide) → Zustand
│ │ Pros: Simple API, 1KB, no boilerplate
│ │ Cons: No time-travel debugging
│ │ Use when: Simple global state needs
│ │
│ ├─ Complex (nested, computed) → Jotai or Valtio
│ │ Jotai: Atomic state (like Recoil but lighter)
│ │ Valtio: Proxy-based (mutable-looking API)
│ │
│ └─ Enterprise (DevTools, middleware) → Redux Toolkit
│ Pros: DevTools, middleware, established patterns
│ Cons: Verbose, 40KB+ with middleware
│ Use when: Need audit log, time-travel debugging
│
└─ Form state?
├─ Simple (<5 fields) → useState + validation
├─ Complex → React Hook Form
│ Pros: Performance (uncontrolled), 25KB
│ Cons: Learning curve
│
└─ With schema validation → React Hook Form + Zod
Full type safety + runtime validationPerformance Optimization Decision Matrix
| Issue | Symptom | Solution | Expected Improvement |
|---|---|---|---|
| Slow initial load | FCP >2s, LCP >2.5s | Code splitting (React.lazy) | 40-60% faster |
| Re-render storm | Component renders 10+ times/sec | React.memo, useMemo | 80%+ reduction |
| Large bundle | JS bundle >500KB | Tree shaking, dynamic imports | 30-50% smaller |
| Slow list rendering | List >1000 items laggy | react-window/react-virtualized | 90%+ faster |
| Expensive computation | CPU spikes on interaction | useMemo, web workers | 50-70% faster |
| Prop drilling | 5+ levels of props | Context API or state library | Cleaner code |
Component Pattern Selection
| Use Case | Pattern | Complexity | Flexibility | Example |
|---|---|---|---|---|
| Simple UI | Props + children | Low | Low | <Button>Click</Button> |
| Configuration | Props object | Low | Medium | <Button config={{...}} /> |
| Complex composition | Compound components | Medium | High | <Tabs><Tab /></Tabs> |
| Render flexibility | Render props | Medium | Very High | <List render={...} /> |
| Headless UI | Custom hooks | High | Maximum | useSelect() |
| Polymorphic | as prop | Medium | High | <Text as="h1" /> |
Red Flags → Escalate to Senior React Developer
STOP and escalate if:
- Need Server-Side Rendering (use Next.js, not plain React)
- Performance requirement <16ms render time (60 FPS animation)
- Considering custom virtual DOM implementation (almost always wrong)
- Component tree depth >20 levels (architecture issue)
- State synchronization across browser tabs required (complex patterns)
Best Practices
Component Design
- Single Responsibility: Each component should have one clear purpose
- Composition over Inheritance: Use composition for reusability
- Props Interface: Design clear, typed component APIs
- Accessibility: Implement WCAG compliance from the start
- Error Boundaries: Handle errors gracefully at component boundaries
State Management
- Colocate State: Keep state as close to where it's used as possible
- Separate Concerns: Distinguish between server and client state
- Optimistic Updates: Improve perceived performance with optimistic updates
- Caching Strategy: Implement intelligent caching for better UX
- State Normalization: Use normalized state for complex data structures
Performance Patterns
- Memoization: Use React.memo, useMemo, and useCallback strategically
- Code Splitting: Implement dynamic imports for large components
- Virtualization: Use react-window or react-virtualized for long lists
- Image Optimization: Implement lazy loading and responsive images
- Bundle Analysis: Regularly analyze and optimize bundle size
Testing Strategy
- Component Testing: Test components in isolation with React Testing Library
- Integration Testing: Test component interactions and data flow
- E2E Testing: Use Playwright or Cypress for user journey testing
- Visual Regression: Catch UI changes with tools like Chromatic
- Performance Testing: Monitor and test component performance
Integration Patterns
react-specialist ↔ typescript-pro
- Handoff: TypeScript types → React components with type-safe props
- Collaboration: Shared types for API data, component props
- Dependency: React benefits heavily from TypeScript
react-specialist ↔ nextjs-developer
- Handoff: React components → Next.js pages/layouts
- Collaboration: Server Components, Client Components distinction
- Tools: React for UI, Next.js for routing/SSR
react-specialist ↔ frontend-ui-ux-engineer
- Handoff: React handles logic → Frontend-UI-UX handles styling
- Collaboration: Component APIs, design system integration
- Shared responsibility: Accessibility, responsive design
Additional Resources
- Detailed Technical Reference: See REFERENCE.md
- Code Examples & Patterns: See EXAMPLES.md