React中非标准数组状态更新写法的弊端有哪些？

两种更新方式对比 #

你的第一种更新代码：

const [array, setArray] = useState([]);

const addElementToArray = () => {
  array.push(1);
  setArray([...array]);
};

return (
  <div className="App">
    <button onClick={addElementToArray}>addElementToArray</button>
    {array.map(el => <div>{el}</div>)}
  </div>
);

标准的数组更新方式：

setArray([...array, 1]);

第一种方式的核心弊端 #

• 违反React状态不可变性原则：React的state设计为不可变值，直接调用array.push(1)会修改原state数组的内容，破坏了React依赖状态引用变化追踪更新的机制。哪怕最后用扩展运算符创建了新数组，中间修改原state的操作本身就不符合规范，容易引发难以排查的状态不一致问题。
• 存在竞态风险：如果组件包含异步操作（比如API请求后更新数组），直接依赖当前array变量的方式可能获取到过时的state值。因为React的state更新是异步批量处理的，多次触发更新时，array可能还是更新前的旧值，导致最终状态不符合预期。而标准写法或函数式更新（setArray(prev => [...prev, 1])）能确保每次更新基于最新状态。
• 代码冗余且可读性差：第一种方式先修改原数组再扩展，比标准写法多了不必要的步骤，逻辑绕弯，其他开发者阅读时需要额外梳理意图，远不如直接创建新数组的写法直观清晰。
• 潜在性能与渲染问题：直接修改原state可能导致依赖state的副作用（比如useEffect监听数组变化）异常触发，因为原数组引用未变但内容已改，React可能无法正确识别状态更新，进而引发不必要的重渲染或渲染不及时的问题。

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