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 Click Configuration Props object Low Medium Complex composition Compound components Medium High Render flexibility Render props Medium Very High Headless UI Custom hooks High Maximum useSelect() Polymorphic as prop Medium High 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