useState值在useEffect中正常返回 但自定义函数内始终为初始值

该现象不属于useState异常，核心是函数组件渲染闭包的状态快照捕获特性，和递归构建树视图的场景直接相关，具体拆解如下：

• 函数组件每次渲染都会生成独立作用域，当前渲染周期内的所有状态、回调函数，都会捕获本次渲染时的状态快照。示例代码初始渲染时，myFunc捕获的selectedItem就是初始值""，如果该回调没有在状态更新后重新绑定到DOM元素，每次点击触发的都是首次渲染生成的myFunc，自然永远打印初始值。
• 递归构建树视图的场景极易触发该问题：如果递归子组件使用了React.memo、或是绑定onClick回调时未更新依赖（比如用useCallback但依赖数组为空/不全），就会导致子组件永远复用首次渲染生成的回调，无法随着父组件状态更新拿到最新状态。
• useState的异步更新仅会导致同一次函数调用内setSelectedItem执行后立即读取拿不到新值，不会出现多次触发回调都无法获取更新后值的情况，该判断正确。

在组件顶层增加打印逻辑，确认状态更新后组件重渲行为与回调更新状态：

const [selectedItem, setSelectedItem] = useState("")
// 新增该行，每次组件渲染都会打印当前最新的selectedItem
console.log("组件重渲，当前selectedItem：", selectedItem)

useEffect(() => {
    console.log("effect: " + selectedItem)
}, [selectedItem])

// 给myFunc添加useCallback，依赖项包含selectedItem，确保状态变更后回调同步更新
const myFunc = useCallback(() => {
    console.log(selectedItem)
    setSelectedItem("2")
    console.log(selectedItem)
}, [selectedItem])

如果点击后组件顶层打印了最新的selectedItem，但点击回调仍打印旧值，即可100%确认是回调未更新导致的问题。

针对递归树场景，按优先级选择适配方案：

1. 所有绑定myFunc的子组件传递正确的key属性，确保节点更新时会重新绑定事件回调
2. 若子组件使用React.memo做性能优化，需确保myFunc用useCallback包裹，且依赖数组包含所有用到的状态（本次场景为selectedItem），不可留空依赖
3. 若需要在回调内拿到最新状态、且不想因回调依赖变更导致子组件重渲，可通过useRef存储状态的实时副本：

const [selectedItem, setSelectedItem] = useState("")
const selectedItemRef = useRef(selectedItem)
// 状态更新时同步更新ref副本
useEffect(() => {
  selectedItemRef.current = selectedItem
}, [selectedItem])

const myFunc = () => {
  // 读取ref.current永远能拿到最新状态
  console.log(selectedItemRef.current)
  setSelectedItem("2")
  console.log(selectedItemRef.current)
}

内容的提问来源于stack exchange，提问作者Jeppe Christensen