React Hooks Patterns

# React Hooks Patterns

## useState
- Functional updates when next state depends on previous: `setX(prev => prev + 1)`
- Lazy init for expensive default: `useState(() => compute())`

## useEffect
- Cleanup pattern:
```tsx
useEffect(() => {
  const id = setInterval(tick, 1000)
  return () => clearInterval(id)
}, [])
```
- Avoid object/array literals in deps (recreated each render). Memoize or use primitives.
- Don't put effects inside conditionals; gate inside the effect.

## useMemo / useCallback
- Use only when:
  - Dep equality check is cheaper than the computation, OR
  - The memoized value is passed to a `React.memo` child / hook dep.
- Premature memoization adds noise.

## useRef
- Mutable box that doesn't trigger re-render: `ref.current = value`
- DOM ref: `<input ref={inputRef} />`

## Custom hooks
- Name starts with `use`. Compose hooks freely.
```ts
function useDebounce<T>(value: T, ms = 300) {
  const [v, setV] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setV(value), ms)
    return () => clearTimeout(id)
  }, [value, ms])
  return v
}
```

## Rules
- Call hooks at the top level, never in loops/conditions.
- Only call from React function components or other hooks.