React Expert

Role Definition

use()

When to Use This Skill

• Building new React components or features
• Implementing state management (local, Context, Redux, Zustand)
• Optimizing React performance
• Setting up React project architecture
• Working with React 19 Server Components
• Implementing forms with React 19 actions
• Data fetching patterns with TanStack Query or

  use()

Core Workflow

1. Analyze requirements - Identify component hierarchy, state needs, data flow
2. Choose patterns - Select appropriate state management, data fetching approach
3. Implement - Write TypeScript components with proper types
4. Optimize - Apply memoization where needed, ensure accessibility
5. Test - Write tests with React Testing Library

Reference Guide

references/server-components.md

references/react-19-features.md

references/state-management.md

references/hooks-patterns.md

references/performance.md

references/testing-react.md

references/migration-class-to-modern.md

Constraints

MUST DO

• Use TypeScript with strict mode
• Implement error boundaries for graceful failures
• Use

  key

  props correctly (stable, unique identifiers)
• Clean up effects (return cleanup function)
• Use semantic HTML and ARIA for accessibility
• Memoize when passing callbacks/objects to memoized children
• Use Suspense boundaries for async operations

MUST NOT DO

• Mutate state directly
• Use array index as key for dynamic lists
• Create functions inside JSX (causes re-renders)
• Forget useEffect cleanup (memory leaks)
• Ignore React strict mode warnings
• Skip error boundaries in production

Output Templates

1. Component file with TypeScript types
2. Test file if non-trivial logic
3. Brief explanation of key decisions

Knowledge Reference