React useEffect 里请求接口导致无限循环，依赖数组到底该写什么

useEffect(() => {
  let alive = true;
  fetch('/api/list').then(r => r.json()).then(d => {
    if (alive) setList(d);
  });
  return () => { alive = false; };
}, []);

组件挂载后接口被反复调用，网络面板里同一个请求每秒好几次，页面卡顿。先别急着动参数，把报错原文和时间点记下来，顺序反了容易白折腾。

原因不复杂，effect 内更新了状态，而该状态又在依赖数组里，每次渲染都触发新的 effect。

「React useEffect 死循环」确认了原因之后，改动尽量只碰那一处，顺手改的东西后面最容易出问题。动手前把原文件复制一份带时间戳，出问题立刻换回去，比现场分析快得多。

一次只改一处，改完立刻验证，几个改动叠在一起，出问题就说不清是谁导致的。先做最小复现，能稳定跑出来的问题，排查成本会低一个数量级。

别只看报错的最后一行，往上看几行，真正的起因通常在上面。

处理上按这个顺序：依赖只保留真正影响逻辑的外部变量；函数用 useCallback 稳定引用；必要时用空依赖加卸载标记。

改完只确认一件事：页面加载只请求一次，切换路由后不再有重复请求，也没有内存泄漏警告。