为什么useEffect依赖数组的长度在组件渲染间必须保持恒定？

警告原因 #

你遇到的警告核心问题是错误地将items数组直接作为useEffect的第二个参数（依赖项数组），而非把items作为依赖数组的一个元素传入。

React对useEffect的依赖项数组有严格要求：每次渲染时，数组的长度和元素顺序必须保持稳定。当你直接传items时，React会把数组内的每一项都拆解成独立依赖项：

• 初始渲染时items有3个元素，依赖项数组等价于[item1, item2, item3]
• 删除元素后items长度变为2，依赖项数组变成[item1, item2]，长度发生了变化，触发了React的警告机制。

修复方法 #

将useEffect的依赖项数组改为包含items的数组，而非直接传入items：

原错误代码：

useEffect(() => {
  console.log(items);
}, items);

修正后代码：

useEffect(() => {
  console.log(items);
}, [items]);

原理说明 #

修正后，React会把items数组本身当作一个单一依赖项监听，无论数组内部元素数量如何变化，依赖项数组始终是[items]，长度固定为1，完全符合React对依赖项数组的稳定性要求，警告自然会消失。

内容的提问来源于stack exchange，提问作者Mr. Cob