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

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

回答与解析：

在 React 中，useEffect 无限循环通常是因为在 effect 中修改了状态，而该状态又被包含在依赖数组中，从而导致 effect 反复触发。

错误示例：

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

  useEffect(() => {
    setCount(count + 1); // 修改 count
  }, [count]); // 依赖 count → 触发无限循环
}

解决方法：

1. 使用函数式更新（推荐）
   如果新状态仅依赖于前一个状态，可省略依赖项并使用函数式更新：

   useEffect(() => {
     setCount(prev => prev + 1);
   }, []); // 无依赖，只运行一次
   

2. 移除不必要的依赖
   如果 effect 中的状态并非真正需要响应变化，可考虑是否应将其从依赖数组中移除（需配合 ESLint 插件 eslint-plugin-react-hooks 的建议谨慎操作）。

3. 使用 useRef 缓存值
   对于不需要触发 re-render 的中间值，可用 ref 保存：

   const countRef = useRef(count);
   useEffect(() => {
     countRef.current = count;
   });
   
   useEffect(() => {
     setCount(countRef.current + 1);
   }, []); // 不依赖 count
   

4. 合理设计逻辑
   重新审视组件逻辑，避免在 effect 中直接修改触发其自身的状态。

React 官方推荐始终将 useEffect 的依赖数组保持完整（即包含 effect 内所有引用的 props 和 state），然后通过上述策略打破循环依赖，而不是手动忽略依赖。这能确保代码行为可预测且易于维护。