如何将Hook的返回值正确添加到useEffect的依赖数组中？

现有代码问题点 #

• 错误使用new关键字调用useHistory：useHistory是React Router提供的Hook，无需实例化，直接调用即可。
• useCallback依赖数组缺失：当前未将history加入依赖数组，会触发ESLint规则警告，同时可能出现闭包陷阱导致history指向异常。
• 关于history需要memoize的提示说明：React Router v5 中useHistory返回的history对象本身引用稳定，不需要额外做记忆化处理，直接加入依赖数组即可，不会产生Hook嵌套问题。

修复后完整代码 #

const [values, setValues] = useState(inititalValues);
// 移除new关键字，直接调用Hook
const history = useHistory();

const isLogin = useCallback(() => {
  if (!localStorage.getItem("token")) {
    history.push("/");
    toast.error("Please Login");
  }
// 将history加入依赖数组
}, [history]);

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

React Router v6 兼容方案 #

如果你使用的是React Router v6版本，useHistory已被废弃，可使用useNavigate替代实现相同逻辑：

const navigate = useNavigate();
const isLogin = useCallback(() => {
  if (!localStorage.getItem("token")) {
    navigate("/");
    toast.error("Please Login");
  }
}, [navigate]);

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