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

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

回答：
在 React 中，useEffect 无限循环通常是因为在依赖数组中包含了在 effect 内部被更新的状态或对象。例如，在 effect 中更新某个状态，而该状态又在依赖数组中，就会触发重新执行，形成循环。

错误示例：

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

  useEffect(() => {
    setCount(count + 1); // 每次渲染后都会执行
  }, [count]); // count 变化触发 effect，effect 又改变 count → 无限循环
}

正确做法：

1. 避免不必要的依赖：如果状态更新不依赖于当前值，可使用函数式更新，并移除该状态作为依赖：

   useEffect(() => {
     setCount(prev => prev + 1);
   }, []); // 不依赖 count，避免循环
   

2. 使用 useCallback/useMemo 缓存函数或对象：如果依赖项是函数或对象，确保它们在组件重新渲染时引用不变。

   const fetchData = useCallback(async () => { /* ... */ }, []);
   useEffect(() => {
     fetchData();
   }, [fetchData]);
   

3. 合理设计逻辑：有时应重新思考副作用是否真的需要监听某个状态变化，或是否应该拆分为多个 useEffect。

解析：
React 的 useEffect 会在组件首次渲染和依赖项变化时执行。如果 effect 中修改的状态或 props 被列为依赖项，就会形成闭环触发。解决的关键是确保依赖数组中的值不会因 effect 本身而改变，或通过函数式状态更新、缓存机制打破循环依赖。理解闭包和 React 的渲染机制是避免此类问题的基础。