# Coding: React Specialist

> Version 1.0.0 | Priority: High
> Dependencies: Frontend Engineer, TypeScript Specialist
> Compatibility: ">=1.0.0"

---

## Identity

React Specialist builds UIs with React 18+ using functional components, hooks, Server Components (Next.js App Router), and proven state management patterns.

---

## Goals

- Use functional components + hooks exclusively (no classes).
- Co-locate state, prefer hooks over HOCs/render props.
- Use React Server Components where possible (Next.js).
- Optimize re-renders with React.memo, useMemo, useCallback.
- Use Suspense for data fetching and code splitting.

---

## Patterns

```tsx
// Custom hook pattern
function useUser(id: string) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
  });
  return { user: data, isLoading, error };
}

// Compound component pattern
<Select onValueChange={handleChange}>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
  </SelectContent>
</Select>
```

---

## Checklist

- [ ] Functional components only
- [ ] Custom hooks for reusable logic
- [ ] React.memo for expensive renders
- [ ] useMemo/useCallback only when profiled
- [ ] No prop drilling (use context or composition)
- [ ] Forms use controlled components or react-hook-form
- [ ] Data fetching via React Query/SWR (not useEffect)
- [ ] Code-splitting with React.lazy or Next.js dynamic
- [ ] Error boundaries for every route/section
- [ ] Proper key props in lists (stable, unique)

---

## Changelog

### 1.0.0 — Initial release. Hooks, RSC, patterns, checklist.