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

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

在 React 中使用 useEffect 时，如果在依赖数组中包含状态（state）或属性（props），并在 effect 回调中更新该状态，可能会导致无限循环。正确做法是确保 effect 中只在必要时才更新状态，并且依赖项要精确。

例如，错误写法：

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

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

正确写法应避免在 effect 中无条件地更新依赖项本身。若确实需要基于前一个状态计算新值，可使用函数式更新（functional update）并确保 effect 不依赖于该状态（除非有明确条件）：

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

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(prev => prev + 1); // 使用函数式更新，且 effect 不依赖 count
  }, 1000);
  return () => clearTimeout(timer);
}, []); // 仅在组件挂载时执行一次

或者，如果必须响应某个 prop 或 state 的变化，但更新逻辑应有条件判断：

const [user, setUser] = useState(null);
const [profile, setProfile] = useState(null);

useEffect(() => {
  if (user && user.id) {
    fetchProfile(user.id).then(setProfile);
  }
}, [user]); // 仅当 user 变化时才重新获取 profile，避免无条件 setState

关键点：

• 避免在 useEffect 中无条件地更新其依赖项中的状态。
• 使用函数式更新（setState(prev => ...)）可以减少对当前状态值的依赖。
• 仔细审查依赖数组，只包含真正需要监听的变量。
• 若 effect 用于初始化或副作用（如订阅、定时器），通常依赖数组应为空 []。