React自定义Hook中useState更新后值未即时生效的问题

这种情况是React状态更新机制和闭包特性共同导致的，具体原因如下：

• 状态更新是异步批量处理的：React的setState（包括useState返回的更新函数）不是同步操作，调用setVal(100)后，React不会立刻修改myVal的值，而是会把这次更新加入队列，等到当前渲染周期结束后再批量更新状态并触发重新渲染。
• 闭包捕获了初始状态值：initialize函数是在Hook第一次渲染时创建的，它会捕获当时的myVal变量（值为0）。哪怕后续调用setVal触发了状态更新，这个函数内部的myVal依然是它创建时捕获的旧值，所以console.log输出的是0。

解决方案 #

如果需要查看更新后的状态值，可以通过useEffect监听myVal的变化：

import { useEffect, useState } from 'react'

export const useMyHook = () => {
  const [myVal, setVal] = useState(0)
  
  useEffect(() => {
    initialize()
  },[])

  // 监听myVal的变化，状态更新后会触发这里的逻辑
  useEffect(() => {
    console.log('更新后的myVal:', myVal)
  }, [myVal])
  
  const initialize = () => {
    setVal(100)
  }

  return myVal
}

如果需要在更新状态时直接使用最新的状态值（比如基于旧值计算新值），可以使用函数式更新的方式：

const initialize = () => {
  setVal(prevVal => {
    const newVal = 100
    console.log(newVal) // 这里可以直接拿到新值
    return newVal
  })
}

内容的提问来源于stack exchange，提问作者Bill Haack