React Hook useEffect has missing dependencies (witout moving function inside useEffect)

Question

This is my part of code. Everything works fine but eslint gives error.

React Hook useEffect has missing dependencies: 'dispatch' and 'getData'. Either include them or remove the dependency array react-hooks/exhaustive-deps

I found some solutions but all of say you need to move function inside the useEffect, but I can't. Because I'm calling setData() function sometimes that is in the Jsx.

So getData not only run when component mounted.

Some similar questions but as i said; I can't move function inside the useEffect. Answers always same:

React Hook useEffect has a missing dependency

React Hook useEffect has a missing dependency: 'list'

export const Complex = (props) => {
// [+] Olmayan başlık tespiti. [+] Var olan başlık tespiti. [-] Daha önce
// açılmış fakat ilk entrysi silinmiş başlıklar.
const params = queryString.parse(props.location.search)

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);

const data = {
    id: id,
    link: str,
    page: params.sayfa ? parseInt(params.sayfa) : 1,
    isGood: params.guzel ? params.guzel : false
};


// STATE
const [title,setTitle] = useState("")
const [titleSubs,setTitleSubs] = useState("")
const [entryCount,setEntryCount] = useState()
const [titleId,setTitleID] = useState()
const [exist,setExist] = useState(true)
const [entries,setEntries] = useState([])
const [likes,setLikes] = useState([])
const [disabled,setDisable] = useState(false)
const [isLoading,setLoading] = useState(false)

// REDUX
const titleModal = useSelector(state => state.settings.titleModal)
const dataPage = useSelector(state => state.pageInfo.page)
const entryNormal = useSelector(state => state.character.entry.entryNormal)
const entryCats = useSelector(state => state.character.entryCats)
const isAuthenticated = useSelector(state => state.auth.authenticated)
const dispatch = useDispatch();

function getData() {
    setLoading(true)
    // For everyone
    axios.post('/api/data/entry/get', data)
    .then(res  => {
            setExist(true)
            setTitleID(res.data.title.id)
            setEntries(res.data.entries)
            setEntryCount(res.data.count)
            setTitle(res.data.title)
            setTitleSubs(res.data.title.titlesubs)
            setLoading(false)

            if (titleModal) {
                // Send Redux Link Informations
                dispatch(setCurrentPage({type: null, id: null, title: null}))
            } else {
                dispatch(setCurrentPage({type: "entry", id: res.data.title.id, title: res.data.title.title}))
            }
    })
    .catch(err => {
        console.log(err)
        setExist(false)
        setLoading(false)
        setTitle(str)
    })

    // If Authenticated.
    // Get liked entries.
    if (isAuthenticated) {
        axios.post('api/data/entry/likes/get', {titleId: data.id})
        .then(res => {
            const LikesList = [];
            res.data.forEach(data => {
                LikesList.push(data.EntryId)
            });
            setLikes(LikesList)
        })
    }

}

useEffect(() => {
    getData()
    return () => {
        setEntries([])
        dispatch(setCurrentPage({type: null, id: null, title: null}))
    }
}, [id, props.location.search])

function getGoodEntriesGeneral() {
    const params = queryString.parse(props.location.search)
    params['guzel'] = true;
    const serialize = obj => Object.keys(obj)
                         .map(key => `${key}=${encodeURIComponent(obj[key])}`).join('&')
    history.push({
        pathname: props.location.pathname,
        search: serialize(params)
    })
}

Is data that you use inside axios.post comes from state? — Asaf Aviv

Mateusz Krzyżanowski Mateusz Krzyżanowski · Accepted Answer · 2019-12-11T19:22:34

A new version of settings for eslint provided by React creators enforce programmer to put all variables in the array. You can check https://github.com/facebook/create-react-app/issues/6880#issuecomment-485912528

React Hook useEffect has missing dependencies (witout moving function inside useEffect)

1 Answers