React useEffect调用自定义Hook缺依赖警告，添加后触发无限循环

问题根源 #

你遇到的两个现象本质是同一个原因导致的：

• 自定义Hook useAuth 每次渲染返回的initAuth是全新的函数引用，authObject也是全新的对象引用
• 如果你把这两个值加入useEffect依赖，每次initAuth执行更新权限状态后，会触发App组件重渲染，生成新的initAuth/authObject引用，进而再次触发useEffect执行，形成无限循环
• 空依赖数组的情况下，eslint规则检测到useEffect内部用到了外部的initAuth变量，就会抛出缺少依赖的警告

可行解决方案（按推荐优先级排序） #

方案1：优化自定义useAuth，固定引用稳定性

修改你的useAuth实现，用useCallback包裹initAuth，确保函数引用只在必要时更新：

// useAuth.js 内部调整示例
const initAuth = useCallback(() => {
  // 保留原有initAuth逻辑：读取本地存储、更新权限状态等
  const token = localStorage.getItem('token')
  const username = localStorage.getItem('username')
  // ... 其他业务逻辑
}, [/* 仅填写initAuth真正依赖的稳定值，比如状态更新函数setAuthState这类React内置的稳定引用 */])

修改完成后，你就可以把稳定的initAuth加入useEffect依赖数组，不会触发无限循环，也不会有警告：

useEffect(() => {
  initAuth();
}, [initAuth]);

方案2：明确声明只执行一次，忽略eslint警告

如果你的业务逻辑确实要求initAuth仅在页面首次加载/硬刷新时执行1次，不需要响应任何后续状态变化，可以直接在useEffect上方加eslint忽略注释，是符合你当前需求的最简实现：

useEffect(() => {
  initAuth();
// 明确告知eslint跳过依赖校验，逻辑仅执行一次
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

方案3：抽离initAuth到Hook外部

如果initAuth逻辑不需要访问useAuth内部的可变状态，仅依赖localStorage等全局API，可以直接把它定义在useAuth函数外面，这样它的引用永远固定，直接加入依赖数组也不会触发循环或警告。

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