# React Expert

> 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. Use when this capability is needed.

- Skill: `tomevault-io/react-expert-7` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-expert-7`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-expert-7/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-expert-7

---


> **AI-consumed reference.** Optimized for Claude to read during execution.
> Human-readable explanation: see [docs/architecture/HIERARCHICAL_PLANNING.md](../../../docs/architecture/HIERARCHICAL_PLANNING.md)
> or [docs/getting-started/](../../../docs/getting-started/) depending on topic.


# React Expert — Gotchas & Decisions

Use Context7 for full React docs.

## Key Decisions

```toon
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

---
> Source: [nguyenthienthanh/aura-frog](https://github.com/nguyenthienthanh/aura-frog) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-28 -->