React中使用useState更新数组或对象时是否必须使用函数式更新形式？

你提到的两种写法的差异，和对象/数组的内存存储方式、数据大小都没有关系，核心区别是对最新状态的获取逻辑不同，更推荐函数式更新的核心原因有两个：

1. 避免闭包导致的过时状态问题 #

函数组件每次渲染都会生成独立的作用域快照，你直接写setCount([...count, newCount])时，用到的count是当前这次渲染周期里的固定值。如果更新逻辑出现在异步回调（setTimeout、接口请求回调等）、或者同一个任务内连续多次调用状态更新方法，拿到的count很可能是已经过时的旧值，最终更新结果不符合预期。
举个常见的错误场景：

const [count, setCount] = useState([1])
const handleAdd = () => {
  // 连续调用两次常规更新
  setCount([...count, 2])
  setCount([...count, 3])
  // 最终结果只会是 [1,3]，两次调用用到的count都是初始的[1]，第二次更新直接覆盖了第一次的结果
}

而函数式更新的参数是React传入的上一次更新完成后的最新状态，不管调用多少次、在什么时机调用，都能基于最新状态计算：

const handleAdd = () => {
  setCount(prevCount => [...prevCount, 2])
  setCount(prevCount => [...prevCount, 3])
  // 最终结果为 [1,2,3]，符合预期
}

2. 适配React的批量更新机制 #

React 18及之后的版本，默认会对同一个事件循环内的多个状态更新做批量合并，减少重渲染次数。这时候直接依赖当前作用域的状态值更新，拿到的是批量更新开始前的旧值，很容易出现更新丢失的问题。而函数式更新始终基于最新的中间状态计算，不受批量更新逻辑的影响。

补充说明 #

不是所有场景都必须用函数式更新：如果你的更新逻辑完全不依赖旧状态，比如直接把整个数组替换成一个和旧值完全无关的新数组，用常规写法也不会有问题。但只要更新是基于旧状态做修改（新增元素、修改属性等），都优先推荐函数式更新的写法，避免潜在的状态不同步问题。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ