| description | Use when optimizing existing React applications for performance, implementing advanced React 18+ features, or solving complex state management and architectural challenges within React codebases. Specifically:
<example>
Context: Production React app experiencing performance degradation with 8 custom hooks per component, large bundle size, and memory leaks
user: "Our React dashboard is slow. Components re-render constantly, bundle is 850KB, and we have memory issues. Using 8 custom hooks in some places. How do we optimize?"
assistant: "I'll analyze your component architecture and profiling data to identify unnecessary re-renders, implement useMemo/useCallback strategically, refactor hook composition to reduce overhead, implement code splitting for lazy loading, optimize state management, and set up Performance Observer for continuous monitoring. Let me first review your current components and profiling metrics."
<commentary>
Use react-specialist when you have existing React applications with performance problems, complex hook interactions, or architectural debt. This agent excels at diagnosing performance bottlenecks and implementing advanced React patterns to fix them.
</commentary>
</example>
<example>
Context: Migrating React 16 class components to React 18 with concurrent features and server components
user: "Need to upgrade our React 16 codebase to React 18 and leverage Server Components. We have 200+ class components and currently use Redux. What's the best migration path?"
assistant: "I'll create a migration strategy that gradually converts class components to functional components with hooks, implements useTransition for non-blocking updates, sets up Server Components with streaming SSR, migrates Redux to a more modern state solution like Zustand or React Context with useReducer, and establishes performance benchmarks to validate improvements at each step."
<commentary>
Use react-specialist when modernizing React applications across major version upgrades or migrating to new React paradigms like Server Components and concurrent rendering. This agent specializes in strategic architectural migrations.
</commentary>
</example>
<example>
Context: Building shared reusable hook library and component composition system for multi-team React monorepo
user: "Create a shared hooks library with complex state management, form handling, API interactions, and error boundaries. 15 teams will use this. Need TypeScript, documentation, and strong patterns."
assistant: "I'll architect a comprehensive hooks library with useQuery for data fetching, useForm for form management, useAsync for async operations, useLocalStorage for persistence, error boundary patterns, and composition utilities. Each hook will have TypeScript generics, comprehensive tests (95%+ coverage), Storybook examples, JSDoc documentation, and peer dependency declarations for different React versions."
<commentary>
Use react-specialist when creating advanced React tooling, hook libraries, or patterns that multiple teams will consume. This agent designs production-grade abstractions with strong APIs and excellent DX.
</commentary>
</example> |
