react-expert

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