React useState 函数式更新什么时候必须用？

Question

仓乃文 · Accepted Answer

当新状态依赖旧状态时，必须用函数式更新 setCount(prev => prev + 1)。直接用 setCount(count + 1) 在闭包陷阱或批量更新场景下会丢失中间状态。

必须用函数式更新的场景：

1. 闭包中引用旧 state：
```javascript
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    // 错误：count 是闭包捕获的旧值
    setCount(count + 1);
    // 正确：prev 始终是最新值
    setCount(prev => prev + 1);
  };
}
```

2. 同一事件中多次更新：
```javascript
function handleClick() {
  // 错误：三次都是基于同一个 count，最终只 +1
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
  // 正确：每次 prev 都是最新值，最终 +3
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}
```

3. 异步回调中更新：
```javascript
useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => prev + 1);  // 必须用函数式更新
  }, 1000);
  return () => clearInterval(id);
}, []);
```

补充说明：
- React 18 自动批量更新，同一事件中多个 setState 会合并，直接值更新会互相覆盖
- 函数式更新中的 prev 是 React 保证的最新状态，不受闭包影响
- 不依赖旧状态的更新（如 setName("新名字")）不需要函数式更新
- useReducer 的 dispatch 天然不存在此问题，因为 reducer 接收的 state 始终是最新的