React组件无限重渲染：useEffect依赖仅含setState仍重复触发问题

根因分析 #

问题核心为useEffect依赖数组中的函数引用不稳定，每次组件渲染时生成新的函数实例，触发useEffect重复执行，最终形成循环：

• 若setCart、setCart_c、setItems是自定义Hook返回的普通函数、未使用useCallback包裹，每次组件重渲染都会生成新的引用
• 若setCookie为自行封装的工具函数且未做引用缓存，也会存在引用不稳定的问题
  额外你当前代码的mounted标识逻辑写反，完全无法起到防止组件卸载后更新状态的作用。

修复步骤 #

1. 修正mounted判断逻辑 #

let mounted = true; // 初始化标记组件已挂载
const getCart = async () => {
  if (!mounted) return; // 仅挂载状态下执行后续逻辑
  // 原有请求逻辑保持不变
};
getCart();
return () => {
  mounted = false; // 组件卸载时标记为未挂载
};

2. 稳定依赖项引用 #

所有放入useEffect依赖数组的函数，均使用useCallback包裹缓存引用：

• redux返回的dispatch本身为稳定引用，无需额外处理
• 自定义Hook返回的setCart、setCart_c、setItems函数，均套上useCallback，依赖数组仅填入函数内部用到的稳定变量
• 自行封装的setCookie函数同样用useCallback做引用缓存

3. 补全隐式依赖 #

你当前代码中用到的auth、user._id、token、getCartCookie、removeCookie、getUserCart、getItem、createCart均属于useEffect的隐式依赖，需要补充到依赖数组中；若确认对应值为全局稳定值，可通过eslint忽略注释跳过检查。

快速验证方案 #

若要快速定位问题是否为依赖项不稳定导致，可临时将useEffect的依赖数组改为空数组[]，若不再无限触发即可确认根因判断正确。

内容的提问来源于stack exchange，提问作者h0sny