为何ESLint会触发useEffect依赖数组错误？附React代码场景

关于ESLint的提示：不是误解，是合理要求 #

你的代码里，useEffect的回调函数内部调用了navigate，但依赖数组里只加了isAuthenticated。ESLint的react-hooks/exhaustive-deps规则就是专门检查这类问题的——只要回调里用到了组件作用域内的变量或函数，就必须放进依赖数组，所以这个提示是正确的，不是对规则的误解。

useEffect依赖数组的实际工作机制 #

你对依赖数组的理解只对了一部分：它确实是用来指定“哪些变量变化时触发useEffect重新执行”，但更核心的是，它能让React正确捕获回调执行时的变量快照。

每次组件渲染，useEffect的回调都会绑定当前渲染周期里的所有依赖值。如果遗漏了依赖，回调可能会引用到上一次渲染的旧值，导致逻辑不符合预期。比如如果navigate哪天因为某种原因引用变了（虽然实际useNavigate返回的函数是稳定的），没加依赖的话，回调里用的还是旧的navigate，可能出问题。

解决报错的两种简单方案 #

方案一：直接把navigate加入依赖数组 #

useNavigate返回的函数在组件生命周期内是稳定的（每次渲染都返回同一个引用），所以加入依赖数组不会导致useEffect额外触发，完全安全：

const navigate = useNavigate();

useEffect(() => {
    if (isAuthenticated) {
        navigate("/");
    }
}, [isAuthenticated, navigate]);

方案二：用注释跳过检查（不推荐，除非你确定没问题） #

如果你百分百确定navigate永远不会变，也可以加注释跳过ESLint检查，但这种做法容易埋下隐藏bug，尽量不用：

const navigate = useNavigate();

useEffect(() => {
    if (isAuthenticated) {
        navigate("/");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated]);

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