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

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

在使用 React 的 useEffect Hook 时，如果在依赖数组中包含了在 effect 内部被更新的状态，就可能导致无限循环。例如：

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

useEffect(() => {
  setCount(count + 1); // 每次 count 变化都会触发 effect，effect 又改变 count，形成循环
}, [count]);

正确做法：

1. 如果 effect 不依赖外部变量，可使用空依赖数组：

useEffect(() => {
  // 仅在组件挂载时执行一次
}, []);

2. 如果需要基于前一个状态更新，使用函数式更新：

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

3. 使用 useReducer 替代复杂状态逻辑，或将副作用逻辑移到事件处理函数中。

4. 必要时使用 useRef 存储最新值而不触发重渲染：

const countRef = useRef(count);
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  // 使用 countRef.current 而不是 count
}, []);

关键原则：确保 effect 中修改的状态不会出现在其依赖数组中，除非你明确需要该行为且能控制循环。