为何将状态赋值为常量数组会引发useEffect无限循环？

无限循环的核心逻辑 #

• 数组引用每次都变：组件每次渲染时，const x = [1001, 1002]都会生成一个全新的数组实例（引用类型每次声明都会分配新的内存地址，即使内容一样）。
• 顶层直接触发状态更新：在组件函数体内直接调用setY(x)，会立刻触发React更新状态y，进而导致组件重新渲染。
• 循环触发重渲染：组件重新渲染后，又会创建新的x，再次调用setY(x)，重复这个流程，最终形成无限循环。

关于useEffect的补充说明 #

虽然useEffect的依赖项是x，每次渲染x的新引用会导致useEffect反复执行，但这不是无限循环的根源——真正的问题是组件顶层直接调用setY触发的状态更新循环。

修复方案 #

• 不在组件顶层调用状态更新函数：状态更新应该放在特定触发时机（比如useEffect、事件回调），而非每次渲染都执行。
• 稳定数组引用：如果x是固定常量，用useMemo缓存它的引用，避免每次渲染生成新实例：

  const x = useMemo(() => [1001, 1002], []);
  

• 调整状态初始化时机：如果需要把y初始化为x的值，直接在useState里初始化即可：

  const [y, setY] = useState([1001, 1002]);
  

  或者放在仅执行一次的useEffect中：

  useEffect(() => {
    setY(x);
  }, []); // 空依赖确保只执行一次
  

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