React Hook useEffect 缺少依赖项：'History'

Question

I Have This Code:

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({});
    const {AuthState: {Authentication: {Loading, Data, Error}}, AuthDispatch}=useContext(MasterContext);
    const FormData = (event) => {
        const { target: { value, name } } = event;
        setLogin({...login, [name]: value});
    };

    const FormValid =
        !login.email?.length ||
        !login.password?.length;

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

    useEffect(() => {
        if(Data) {
            if(Data.user) {
                History.push("/");
            }
        }
    }, [Data])

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

export default useLoginForm;

It's work fine but with warnings. "React Hook useEffect has a missing dependency: 'History'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

Answer 1

You can add History as a dependency, History wont change unless route is changed. So your useEffect hook wont run unless data or History is changed.

  useEffect(() => {
        if(Data && Data.user) {
                History.push("/");
        }
    }, [Data, History])