React Hook useEffect has a missing dependency: 'callDayList'. Either include it or remove the dependency array - use-effect

Question

React useState keep giving me undefined
this is my last questions, and it helped me a lot.
I had a problem of updating of state, and I understood the cause. but it caused me another problem.
const [urlList, setUrlList] = useState(0);
const callDayList = () =>{
Axios.post('http://localhost:3001/api/get',{
passNum :urlList,
});
};
useEffect(() => {callDayList();},[urlList]);
this is my code, and when urlList changes, I want to execute callDayList and pass the value of urlList. when I study about useEffect, I found the problem, if I include urlList inside callDayList, it will cause infinite re-rendering error. but I want to pass the value of urlList when it changes. how can I solve it?

Answer 1

Warning is thrown since you are not using urlList in the useEffect hook. Make use of the variable or update callDayList method.
const [urlList, setUrlList] = useState(0);
const callDayList = (list) =>{
Axios.post('http://localhost:3001/api/get',{
passNum :list,
});
};
useEffect(() => {callDayList(urlList);},[urlList]);
or
const [urlList, setUrlList] = useState(0);
const callDayList = () =>{
Axios.post('http://localhost:3001/api/get',{
passNum :urlList,
});
};
useEffect(callDayList,[urlList]);

Answer 2

Another solution is to use React.useCallback.
Right now, callDayList changes on every render which is one of the reasons why you can't add it to the dependency list. To prevent this, wrap the function in a useCallback:
const callDayList = React.useCallback(() => {
Axios.post('http://localhost:3001/api/get', {
passNum: urlList,
});
}, [urlList]);
Now, callDayList will change only when urlList changes. Now you can rewrite your useEffect:
React.useEffect(callDayList, [callDayList]);
Now callDayList is called only when it changes, and it changes only when urlList changes - which is what you want.