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
– Estus Flask, Commented Nov 11, 2020 at 21:19
It's due to the ESLint rule called "react-hooks/exhaustive-deps". Explained here: reactjs.org/docs/hooks-rules.html — carlosvini
– carlosvini, Commented Nov 11, 2020 at 21:19

Arun Shankar · Accepted Answer · 2020-11-11 21:16:12Z

1

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.

answered Nov 11, 2020 at 21:16

Arun Shankar

896 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

UseEffect - React Hook useEffect has a missing dependency:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related