如何在 React 中正确使用 useEffect 来监听某个状态变化并避免无限循环？

如何在 React 中正确使用 useEffect 来监听某个状态变化并避免无限循环？

回答：
在 React 的 useEffect 中，若在依赖数组中包含某个状态，并且在 effect 回调中又更新了该状态，就可能导致无限循环。要避免这种情况，应确保：

1. 只在必要时更新状态：在 effect 中更新状态前，先判断新值是否与当前值不同；
2. 使用函数式更新：如果新状态依赖于前一个状态，使用 setState(prev => ...) 形式；
3. 合理设置依赖项：确保依赖数组精确反映 effect 中使用的变量。

示例：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 避免无条件更新，防止无限循环
    if (count < 10) {
      setCount(prev => prev + 1);
    }
  }, [count]); // 依赖 count，但有条件更新，避免无限触发

  return <div>{count}</div>;
}

解析：
useEffect 在每次渲染后，会检查依赖数组中的值是否发生变化。如果变化，就执行回调。如果回调中又改变了依赖项的值（如 setCount(count + 1)），就会再次触发 effect，从而形成无限循环。通过添加条件判断或使用函数式更新配合合理的逻辑，可以打破这个循环。此外，也可以考虑是否真的需要将该状态放入依赖数组，或是否应使用其他 Hook（如 useReducer）来管理复杂状态逻辑。