如何在 React 中正确地使用 useEffect 来监听对象或数组依赖项的变化，避免无限循环或无效更新？

如何在 React 中正确地使用 useEffect 来监听对象或数组依赖项的变化，避免无限循环或无效更新？

回答与解析：

在 React 的 useEffect 中，如果直接将对象或数组作为依赖项（如 [user] 或 { id: 1 }），由于每次渲染都会创建新的引用，即使内容相同，useEffect 也会认为依赖发生了变化，从而触发重新执行，可能导致无限循环或性能问题。

正确做法如下：

1. 使用依赖项的原始值（如原始类型）：如果对象/数组中的某个字段是原始类型（string、number 等），优先监听该字段。

useEffect(() => {
  console.log('User ID changed:', user.id);
}, [user.id]); // 而非 [user]

2. 使用 useMemo 缓存对象/数组：在父组件中使用 useMemo 包裹对象/数组，确保引用稳定。

const user = useMemo(() => ({ id, name }), [id, name]);

useEffect(() => {
  // 仅当 id 或 name 改变时执行
}, [user]);

3. 使用自定义比较逻辑（如 useDeepCompareEffect）：对于复杂对象，可借助第三方库（如 use-deep-compare-effect）或自行实现深比较。

4. 避免在 useEffect 内部直接修改状态导致循环：

// 错误示例：可能导致无限循环
useEffect(() => {
  setUser({ ...user, updated: true });
}, [user]); // 每次 setUser 都会生成新 user，再次触发 effect

总结：useEffect 的依赖项应尽可能使用稳定引用或原始值。对对象/数组依赖，优先解构为原始值，或通过 useMemo/useCallback 保证引用一致性，避免不必要的副作用执行。