为何ESLint对这段React代码发警告而TypeScript无提示？

直接禁用ESLint的react-hooks/exhaustive-deps规则属于不良实践——这会绕过React Hooks的依赖检查机制，可能导致后续出现依赖更新时effect未触发、或不必要重复执行等难以排查的bug。TypeScript未报错是因为它不负责检查Hooks的依赖合规性，这类校验由ESLint承担。

你遇到的无限重渲染问题，核心是依赖项不稳定而非依赖本身不能加，具体解决方法如下：

1. 处理navigate依赖 #

React Router v6的useNavigate返回的导航函数是稳定引用，不会随组件渲染变化，可安全加入依赖数组，不会引发重渲染。

2. 处理context.setUser依赖 #

如果setUser是从Context中获取的，无限重渲染通常是因为Context的value未做稳定化处理：

• 检查Context Provider的value是否用useMemo包裹，确保只有当user变化时，value才更新：

  const [user, setUser] = useState<null | User>(null);
  const contextValue = useMemo(() => ({ user, setUser }), [user]);
  
  return (
    <AuthContext.Provider value={contextValue}>
      {children}
    </AuthContext.Provider>
  );
  

  处理后setUser会保持稳定引用，加入useEffect依赖后不会触发不必要的effect执行。

3. 优化后的最终代码 #

调整后无需禁用ESLint规则，同时修正原代码中navigate路径的语法错误：

useEffect(() => {
  const authUser = async () => {
    try {
      const loggedInUser = await Api.authenticateUser();
      context.setUser(loggedInUser);
    } catch (error) {
      console.log(error);
      navigate('/login');
    }
  };
  authUser();
}, [navigate, context.setUser]);

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