If state.zip changes, 'getLocations' is called again. No warnings. After 'locations' or 'testFilter' are updated filterSearchLocations is called to set the state of 'searchLocations' which are displayed to the user. Following ESLint error:
Line 91:6: React Hook useEffect has a missing dependency: 'filterSearchLocations'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Why is this warning getting thrown on the second useEffect but not the first?
const getLocations = async () => {
setFetching(true);
try {
const res = await axios.get('http://localhost:8000/common/locations');
dispatch({ type: SET_ALL_LOCATIONS, payload: res.data });
} catch (e) {
console.log(e);
dispatch({ type: SET_ERROR, payload: e.message });
} finally {
setFetching(false);
}
};
const filterSearchLocations = () => {
const searchLocations =
Object.keys(state.testFilter).length === 0
? state.allLocations
: state.allLocations.filter((location) => {
for (let [test] of Object.entries(state.testFilter)) {
if (state.testFilter[test] && location.tests.indexOf(test) === -1)
return false;
}
return true;
});
dispatch({ type: SET_SEARCH_LOCATIONS, payload: searchLocations });
};
// get distances
useEffect(() => {
getLocations();
}, [state.zip]);
// filter search locations
useEffect(() => {
filterSearchLocations();
}, [state.allLocations, state.testFilter]);