| name | react-expert |
| description | React gotchas and decision criteria covering stale closure bugs in useEffect, conditional rendering traps (falsy 0/empty string), state management selection (useState vs Context vs Zustand vs TanStack Query), and hooks rules. Use when writing React components, debugging re-renders, choosing state management, or encountering useEffect infinite loops. |
| autoInvoke | false |
| priority | high |
| triggers | ["react","jsx","hooks","useState","useEffect"] |
| paths | ["**/*.tsx","**/*.jsx","package.json"] |
| allowed-tools | Read, Grep, Glob, Edit, Write |
| user-invocable | false |
AI-consumed reference. Optimized for Claude to read during execution.
Human-readable explanation: see docs/architecture/HIERARCHICAL_PLANNING.md
or docs/getting-started/ depending on topic.
React Expert — Gotchas & Decisions
Use Context7 for full React docs.
Key Decisions
decisions[5]{type,solution}:
Component-specific UI,useState
Shared between siblings,Lift to parent
Theme/auth/deep props,"Context + useMemo value + throw-if-outside-provider"
API/server data,TanStack Query or SWR
Complex global state,Zustand or Redux Toolkit
Gotchas
{count && <X/>} renders "0" when count=0 — use {count > 0 && <X/>}{title && <X/>} renders empty string — use {title != null && title !== '' && <X/>}- Keys: unique IDs only, NEVER array indices (breaks on reorder/delete)
- useEffect with object/array deps → infinite loop. Destructure or useMemo the dep
- useEffect cleanup: return AbortController abort for async fetches
- useMemo/useCallback: only for expensive ops or stable refs to memoized children. Don't wrap everything
- Context: always
useMemo the value object to prevent re-renders on every parent render
- Error boundaries: class component only (no hook equivalent yet). Wrap at route level
