skillhub-088-vercel-react-best-practices/rules/rerender-functional-setstate.md

---

title: Use Functional setState Updates impact: MEDIUM impactDescription: 防止闭包引用过期以及不必要的回调重建 tags: react, hooks, useState, useCallback, callbacks, closures

使用函数式 setState 更新

当基于当前状态值来更新状态时，应使用 setState 的函数式更新形式，而不是直接引用状态变量。这可以防止闭包引用过期、消除不必要的依赖，并创建稳定的回调引用。

错误做法（需要将 items 作为依赖）：

function TodoList() {
  const [items, setItems] = useState(initialItems)
  
  // 回调必须依赖 items，每次 items 变化时都会重建
  const addItems = useCallback((newItems: Item[]) => {
    setItems([...items, ...newItems])
  }, [items])  // ❌ items 依赖导致回调频繁重建
  
  // 如果忘记添加依赖，则会存在闭包引用过期的风险
  const removeItem = useCallback((id: string) => {
    setItems(items.filter(item => item.id !== id))
  }, [])  // ❌ 缺少 items 依赖——将使用过期的 items！
  
  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
}

第一个回调在每次 items 变化时都会重建，这可能导致子组件不必要地重新渲染。第二个回调存在闭包引用过期的 bug——它将始终引用初始的 items 值。

正确做法（稳定的回调，无闭包过期）：

function TodoList() {
  const [items, setItems] = useState(initialItems)
  
  // 稳定的回调，永远不会重建
  const addItems = useCallback((newItems: Item[]) => {
    setItems(curr => [...curr, ...newItems])
  }, [])  // ✅ 不需要依赖
  
  // 始终使用最新状态，无闭包过期风险
  const removeItem = useCallback((id: string) => {
    setItems(curr => curr.filter(item => item.id !== id))
  }, [])  // ✅ 安全且稳定
  
  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
}

优点：

1. 稳定的回调引用——状态变化时无需重建回调
2. 无闭包过期——始终操作最新的状态值
3. 更少的依赖——简化依赖数组，减少内存泄漏
4. 防止 bug——消除了 React 闭包 bug 最常见的来源

何时使用函数式更新：

• 任何依赖于当前状态值的 setState
• 在 useCallback/useMemo 中需要用到状态时
• 引用状态的事件处理函数
• 更新状态的异步操作

何时直接更新即可：

• 将状态设置为静态值：setCount(0)
• 仅通过 props/参数设置状态：setName(newName)
• 状态不依赖于前一个值

注意： 如果你的项目已启用 React Compiler，编译器可以自动优化某些情况，但为了正确性和防止闭包过期 bug，仍然建议使用函数式更新。