# React Quick Reference

## Hooks

| Hook | Purpose | Example |
|------|---------|---------|
| `useState(init)` | Local state | `const [v, setV] = useState(0)` |
| `useEffect(fn, deps)` | Side effects | `useEffect(() => {...}, [dep])` |
| `useRef(init)` | Mutable ref (no re-render) | `const ref = useRef(null)` |

## State Updates

| Pattern | Use When |
|--------|----------|
| `setValue(x)` | New value is independent |
| `setValue(prev => prev + 1)` | Depends on previous state |
| `setValue(prev => ({...prev, key: v}))` | Updating object state |

## useEffect Dependencies

| Array | Behavior |
|-------|----------|
| `[a, b]` | Run when a or b changes |
| `[]` | Run once on mount |
| Omitted | Run after every render (rare) |
| Return fn | Cleanup runs before next effect / unmount |

## Event Handlers

| Event | Handler |
|-------|---------|
| Click | `onClick={fn}` |
| Input | `onChange={(e) => setValue(e.target.value)}` |
| Submit | `onSubmit={(e) => { e.preventDefault(); ... }}` |
| Focus/Blur | `onFocus`, `onBlur` |

## Conditional Rendering

| Pattern | Use Case |
|---------|----------|
| `{cond && <A />}` | Render A or nothing |
| `{cond ? <A /> : <B />}` | Render A or B |
| `if (!cond) return null` | Early exit |

## Lists

```jsx
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}
```

- Keys must be unique among siblings
- Prefer stable IDs over array index

## Decision: State vs Prop vs Derived

| Source | When to Use |
|--------|-------------|
| State | Data that changes, user can modify |
| Prop | Data from parent |
| Derived | Computed from state/props (filter, map, etc.) |