为何依赖newReviewAdded的useEffect未陷入无限循环？

useEffect(() => {
  const controller = new AbortController();

  fetchReviews();   

  setNewReviewAdded(false);

  return () => {
    controller.abort();
  };
}, [newReviewAdded]);

你之所以没遇到无限循环，核心原因是只有当依赖项的实际值发生变化时，React才会重新触发useEffect，而你的代码里不会持续产生这种变化：

• 初始渲染阶段：假设newReviewAdded的初始值是false，此时触发useEffect执行。你在effect里调用setNewReviewAdded(false)，由于状态值没有改变（本来就是false），React不会触发组件重新渲染，useEffect自然不会再次执行。
• 新增评论后：你调用setNewReviewAdded(true)，此时newReviewAdded从false变为true，依赖项变化触发useEffect执行：
  1. 先执行fetchReviews()获取更新后的评论列表
  2. 然后调用setNewReviewAdded(false)，将状态从true改回false，这会触发组件重新渲染
• 组件重新渲染后：newReviewAdded的值是false，和上一次useEffect执行时的依赖值（true）不同，所以会再次触发useEffect。但这次你调用setNewReviewAdded(false)时，状态已经是false，没有任何变化，React不会再触发组件重新渲染，循环到此就终止了。

简单说，你的代码里没有持续让newReviewAdded在true和false之间反复切换的逻辑——最后一次设置状态时没有产生变化，所以不会无限触发useEffect。

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