什么是 Hooks 的闭包陷阱？怎么解决？

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1) // 这里的 count 永远是 0
    }, 1000)
    return () => clearInterval(id)
  }, []) // 只在挂载时执行一次

  return <h1>{count}</h1>
}

第 1 次渲染：count = 0，创建 effect 回调 A，A 中的定时器回调捕获了 count = 0
            A 执行，启动定时器
第 2 次渲染：count = 1，创建新的 effect 回调 B，但依赖 [] 没变，B 不会执行
……
定时器回调一直是第 1 次渲染时创建的那个，每秒执行 setCount(0 + 1)

useEffect(() => {
  const id = setInterval(() => setCount((c) => c + 1), 1000) // React 传入最新的值
  return () => clearInterval(id)
}, [])

function useInterval(callback, delay) {
  const savedCallback = useRef(callback)

  useEffect(() => {
    savedCallback.current = callback // 每次渲染后，更新为最新的回调
  })

  useEffect(() => {
    const id = setInterval(() => savedCallback.current(), delay)
    return () => clearInterval(id)
  }, [delay]) // 只有 delay 变化时才重建定时器
}

function Timer({ step }) {
  const [count, setCount] = useState(0)
  useInterval(() => setCount(count + step), 1000) // 回调里读到的 count 和 step 都是最新的
  return <h1>{count}</h1>
}

useEffect(() => {
  // 只在这里用的函数就定义在这里，它用到的 userId 自然会写进依赖
  async function loadOrders() {
    const res = await fetch(`/api/users/${userId}/orders`)
    setOrders(await res.json())
  }
  loadOrders()
}, [userId])

import { useEffect, useEffectEvent } from 'react'

function ChatRoom({ roomId, theme }) {
  // 每次调用都能读到最新的 theme，但 theme 变化不会让 effect 重新执行
  const onConnected = useEffectEvent(() => {
    showNotification('已连接', theme)
  })

  useEffect(() => {
    const connection = createConnection(roomId)
    connection.on('connected', () => onConnected())
    connection.connect()
    return () => connection.disconnect()
  }, [roomId]) // 只有切换房间才重连，onConnected 不写进依赖
}