React Hook useEffect has a missing dependency when function call - reactjs

Question

I am struggling due to waring from eslint.
Below is sample code and once I run the below code, I get the waringing from eslint.
React Hook useEffect has a missing dependency: 'maxId'. Either include it or remove the dependency array.
How can I remove the warining?
I want to make the process to call the loadMapData function only when pageNo and StartDate are changed.
Sample Code;
import React, { useState, useEffect, useCallback } from "react";
const VehicleHistory = (props) => {
//console.log("VehicleHistory");
const pageSize = 10;
const [mapData, setMapData] = useState();
const [pageNo, setpageNo] = useState(1);
const [startDate, setstartDate] = useState(100);
const [maxId, setmaxId] = useState(0);
useEffect(() => {
console.log("useEffect.pageNo chainging====");
const loadMapData = async () => {
console.log('call loadMapData====');
try {
//Api call to get list data
//No meaning. Just for testing
const _pageNo = pageNo;
const _pageSize = pageSize
const _maxId = maxId;
setMapData('test'+_pageNo + _pageSize+_maxId);
setmaxId(_pageNo + _pageSize);
} catch (err) {
console.log("err", err);
}
}
loadMapData();
}, [pageNo]);
useEffect(() => {
console.log("useEffect.startDate chainging====");
setMapData(null);
setpageNo(1);
}, [startDate]);
return (
<div>
<button onClick={e => setpageNo(p => p + 1)}>Change page</button>
<button onClick={e => setstartDate(s => s + 1)}>Change date</button>
<br />pageNo : {pageNo}
<br />startdate : {startDate}
<br />mapdata : {mapData}
</div>
);
};
export default VehicleHistory;

Answer 1

Issue is here in this code. Basically inside useEffect you are expecting maxId. you need to understand how useEffect work. useEffect required array of dependency which ensure it will run whenever these value changes. So in your case maxId is changing. And useEffect is not sure what to that's why eslint giving error.
useEffect(() => {
console.log("useEffect.pageNo chainging====");
const loadMapData = async () => {
console.log('call loadMapData====');
try {
//Api call to get list data
//No meaning. Just for testing
const _pageNo = pageNo;
const _pageSize = pageSize
const _maxId = maxId; <- Issue is here
setMapData('test'+_pageNo + _pageSize+_maxId);
setmaxId(_pageNo + _pageSize);
} catch (err) {
console.log("err", err);
}
}
loadMapData();
}, [pageNo]);
Solution:
useEffect(() => {
...code
},[pageNo,maxId]) <- add maxId in dependency array