如何在 React 中正确地使用 useEffect 避免无限循环？

如何在 React 中正确地使用 useEffect 避免无限循环？

回答与解析：

在 React 中，useEffect 会根据其依赖数组（dependency array）决定是否重新执行。如果在 useEffect 中更新了某个状态，而该状态又作为依赖项包含在依赖数组中，就可能导致无限循环。

常见错误示例：

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1); // 每次 count 变化都会触发 effect，进而再次更新 count
  }, [count]); // ❌ 依赖 count，导致无限循环
}

正确做法：

1. 移除不必要的依赖：如果 effect 不需要依赖某个状态的最新值，可将其从依赖数组中移除。
2. 使用函数式更新：若更新状态仅基于前一个状态，可使用函数式更新，并将依赖数组设为空（[]）或移除该状态依赖。

   useEffect(() => {
     setCount(prevCount => prevCount + 1);
   }, []); // ✅ 只在组件挂载时执行一次
   

3. 使用 useRef 缓存值：当需要在 effect 中读取但不响应变化的值时，可用 ref。
4. 确保依赖数组完整且必要：React 官方推荐使用 ESLint 插件（eslint-plugin-react-hooks）自动检测依赖问题。

最佳实践：始终思考 effect 的目的——它应在何时运行？是否真的依赖某个值的变化？合理设计依赖数组是避免无限循环的关键。