React Hook useEffect缺少依赖项History的警告问题咨询

这个警告是React的react-hooks/exhaustive-deps lint规则触发的，它的核心目的是确保useEffect中用到的所有外部变量都被明确声明为依赖，避免出现过时闭包的问题。

问题原因 #

你的useEffect钩子内部调用了History.push()，但History这个从useHistory()获取的对象并没有被加入到useEffect的依赖数组中，所以lint工具会提示你补充这个依赖项。

解决方案 #

直接将History添加到useEffect的依赖数组即可，因为react-router-dom的useHistory()返回的history实例在组件的整个生命周期内是引用稳定的，添加它不会导致useEffect不必要地重复执行。

修改后的useEffect片段：

useEffect(() => {
  if(Data) {
    if(Data.user) {
      History.push("/");
    }
  }
}, [Data, History]) // 新增History到依赖数组

完整优化后的Hook代码 #

import { useContext, useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import { MasterContext } from "../../Context/MasterProvider";
import LoginActions from "../../Context/Actions/LoginActions";

const useLoginForm = () => {
  const History = useHistory();
  // 优化初始值，避免后续使用可选链
  const [login, setLogin] = useState({ email: '', password: '' });
  const { 
    AuthState: { 
      Authentication: { Loading, Data, Error } 
    }, 
    AuthDispatch 
  } = useContext(MasterContext);

  const FormData = (event) => {
    const { target: { value, name } } = event;
    // 使用函数式更新，避免闭包导致的状态更新异常
    setLogin(prevState => ({ ...prevState, [name]: value }));
  };

  // 现在无需可选链，代码更简洁
  const FormValid = !login.email.length || !login.password.length;

  const FormSubmit = () => {
    LoginActions(login)(AuthDispatch);
  }

  // 简化判断逻辑，同时补充History依赖
  useEffect(() => {
    if(Data?.user) {
      History.push("/");
    }
  }, [Data, History])

  return { login, FormData, FormValid, FormSubmit, Loading, Error, Data };
}

export default useLoginForm;

额外优化说明 #

1. 把useState初始值改为{ email: '', password: '' }，去掉了FormValid中的可选链操作，代码更简洁直观。
2. setLogin改用函数式更新，避免在复杂场景下因为闭包导致的状态更新错误，符合React最佳实践。
3. 简化了useEffect中的嵌套判断逻辑，直接用Data?.user完成校验，提升代码可读性。

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