404kidwiz/react-specialist

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 validation

Performance 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