React Expert

1---2name: react-expert3description: Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.4license: MIT5metadata:6  author: https://github.com/Jeffallan7  version: "1.1.0"8  domain: frontend9  triggers: React, JSX, hooks, useState, useEffect, useContext, Server Components, React 19, Suspense, TanStack Query, Redux, Zustand, component, frontend10  role: specialist11  scope: implementation12  output-format: code13  related-skills: fullstack-guardian, playwright-expert, test-master14---15 16# React Expert17 18Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.19 20## When to Use This Skill21 22- Building new React components or features23- Implementing state management (local, Context, Redux, Zustand)24- Optimizing React performance25- Setting up React project architecture26- Working with React 19 Server Components27- Implementing forms with React 19 actions28- Data fetching patterns with TanStack Query or `use()`29 30## Core Workflow31 321. **Analyze requirements** - Identify component hierarchy, state needs, data flow332. **Choose patterns** - Select appropriate state management, data fetching approach343. **Implement** - Write TypeScript components with proper types354. **Validate** - Run `tsc --noEmit`; if it fails, review reported errors, fix all type issues, and re-run until clean before proceeding365. **Optimize** - Apply memoization where needed, ensure accessibility; if new type errors are introduced, return to step 4376. **Test** - Write tests with React Testing Library; if any assertions fail, debug and fix before submitting38 39## Reference Guide40 41Load detailed guidance based on context:42 43| Topic | Reference | Load When |44|-------|-----------|-----------|45| Server Components | `references/server-components.md` | RSC patterns, Next.js App Router |46| React 19 | `references/react-19-features.md` | use() hook, useActionState, forms |47| State Management | `references/state-management.md` | Context, Zustand, Redux, TanStack |48| Hooks | `references/hooks-patterns.md` | Custom hooks, useEffect, useCallback |49| Performance | `references/performance.md` | memo, lazy, virtualization |50| Testing | `references/testing-react.md` | Testing Library, mocking |51| Class Migration | `references/migration-class-to-modern.md` | Converting class components to hooks/RSC |52 53## Key Patterns54 55### Server Component (Next.js App Router)56```tsx57// app/users/page.tsx — Server Component, no "use client"58import { db } from '@/lib/db';59 60interface User {61  id: string;62  name: string;63}64 65export default async function UsersPage() {66  const users: User[] = await db.user.findMany();67 68  return (69    <ul>70      {users.map((user) => (71        <li key={user.id}>{user.name}</li>72      ))}73    </ul>74  );75}76```77 78### React 19 Form with `useActionState`79```tsx80'use client';81import { useActionState } from 'react';82 83async function submitForm(_prev: string, formData: FormData): Promise<string> {84  const name = formData.get('name') as string;85  // perform server action or fetch86  return `Hello, ${name}!`;87}88 89export function GreetForm() {90  const [message, action, isPending] = useActionState(submitForm, '');91 92  return (93    <form action={action}>94      <input name="name" required />95      <button type="submit" disabled={isPending}>96        {isPending ? 'Submitting…' : 'Submit'}97      </button>98      {message && <p>{message}</p>}99    </form>100  );101}102```103 104### Custom Hook with Cleanup105```tsx106import { useState, useEffect } from 'react';107 108function useWindowWidth(): number {109  const [width, setWidth] = useState(() => window.innerWidth);110 111  useEffect(() => {112    const handler = () => setWidth(window.innerWidth);113    window.addEventListener('resize', handler);114    return () => window.removeEventListener('resize', handler); // cleanup115  }, []);116 117  return width;118}119```120 121## Constraints122 123### MUST DO124- Use TypeScript with strict mode125- Implement error boundaries for graceful failures126- Use `key` props correctly (stable, unique identifiers)127- Clean up effects (return cleanup function)128- Use semantic HTML and ARIA for accessibility129- Memoize when passing callbacks/objects to memoized children130- Use Suspense boundaries for async operations131 132### MUST NOT DO133- Mutate state directly134- Use array index as key for dynamic lists135- Create functions inside JSX (causes re-renders)136- Forget useEffect cleanup (memory leaks)137- Ignore React strict mode warnings138- Skip error boundaries in production139 140## Output Templates141 142When implementing React features, provide:1431. Component file with TypeScript types1442. Test file if non-trivial logic1453. Brief explanation of key decisions146 147## Knowledge Reference148 149React 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query, Zustand, Redux Toolkit, React Router, React Testing Library, Vitest/Jest, Next.js App Router, accessibility (WCAG)