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

react-specialist

NPX Install

Tags

SKILL.md Content