react-hooks

# React Hooks Skill

Patterns for using and creating React hooks effectively.

## Core Hooks

### useState Patterns

```tsx
// Basic state
const [count, setCount] = useState(0)

// Lazy initialization (expensive computation)
const [data, setData] = useState(() => {
  return computeExpensiveInitialValue()
})

// Previous value pattern
const [value, setValue] = useState('')
const prevValue = useRef(value)
useEffect(() => {
  prevValue.current = value
}, [value])

// Object state (spread pattern)
const [form, setForm] = useState({ name: '', email: '' })
const updateField = (field: string, value: string) => {
  setForm(prev => ({ ...prev, [field]: value }))
}
```

### useEffect Patterns

```tsx
// Mount/unmount
useEffect(() => {
  console.log('Component mounted')
  return () => console.log('Component unmounted')
}, [])

// Dependency tracking
useEffect(() => {
  document.title = `Count: ${count}`
}, [count])

// Cleanup pattern
useEffect(() => {
  const controller = new AbortController()

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') throw err
    })

  return () => controller.abort()
}, [url])

// Event listener pattern
useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if (e.key === 'Escape') onClose()
  }

  document.addEventListener('keydown', handler)
  return () => document.removeEventListener('keydown', handler)
}, [onClose])
```

### useMemo and useCallback

```tsx
// Memoize expensive computation
const sortedList = useMemo(() => {
  return items.sort((a, b) => a.value - b.value)
}, [items])

// Memoize object/array references
const config = useMemo(() => ({
  api: apiUrl,
  timeout: 5000,
}), [apiUrl])

// Memoize callbacks for child components
const handleClick = useCallback((id: string) => {
  selectItem(id)
}, [selectItem])

// Memoize with dependencies
const filteredItems = useMemo(() => {
  return items.filter(item =>
    item.name.toLowerCas