useEffect将data设为依赖项触发无限请求与循环的原因是什么？

function Reply({ id, user }) {
  const [data, setData] = useState([]);
  const [replyText, setReplyText] = useState("");
  
  useEffect(() => {
    async function fetchData() {
      const response = await _axios.get("/reply/" + id);
      setData(response.data);
    }
    fetchData();   
  }, [data]);   // 问题出在将data设为依赖项，导致无限调用fetchData
  
  ...
}

无限循环的具体原因 #

• React的useEffect会在依赖数组内的任意值发生变更时，重新执行回调函数，你这段代码的执行逻辑形成了闭环：
  1. 组件首次渲染，执行useEffect回调，触发fetchData发送请求
  2. 请求拿到返回结果后调用setData(response.data)更新state：因为接口返回的response.data是数组/对象这类引用类型值，哪怕两次返回的内容完全一致，也是存在不同内存地址的新引用，React浅对比依赖时会判定data已经更新
  3. data更新触发组件重渲染，useEffect检测到依赖项data发生变化，再次执行回调调用fetchData，回到步骤1，形成无限循环
• 你看到的304状态码是浏览器缓存机制生效，服务器告知浏览器本地缓存的内容和最新内容一致，可以直接复用，但请求本身还是正常发送到了服务器，属于无效的重复请求。

修复方案 #

把useEffect的依赖项改为[id]即可：只有当评论id变化时，才需要重新拉取对应评论的回复数据，完全不需要把待更新的data本身加入依赖。

内容的提问来源于stack exchange，提问作者Lee Tae jun