UseEffect - React Hook useEffect has a missing dependency:

Question

I'm getting the following error on the useeffect hook.

React Hook useEffect has a missing dependency: 'currentPage'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

Any ideas on why I'm getting this?

const Pagination = () => {
const [ page, setPage ] = useState(1);

let params = new URLSearchParams(window.location.search);
let currentPage = params.get('page') || 1;

useEffect(() => {
    setPage(currentPage)
}, []);

return (
    <div>
        <h1>{page}</h1>
        {/* 
        *
        * Skip number, current page, totalCount
        *                
        */}
    </div>
);

}

How exactly should it work? If it isn't supposed to react to param changes, params should be moved to useEffect, this removes a dep and prevents them from being calculated on every render — Estus Flask
It's due to the ESLint rule called "react-hooks/exhaustive-deps". Explained here: reactjs.org/docs/hooks-rules.html — carlosvini

Arun Shankar Arun Shankar · Accepted Answer · 2020-11-11T21:16:12

adding currentPage to the dependency array would remove the warning and since the value will not change unless the url changes, usseEffect will effectively be called only once.

UseEffect - React Hook useEffect has a missing dependency:

1 Answers