The useFocusEffect doesn't update setstate - react-native

Question

I have this useFocusEffect function:
useFocusEffect(
useCallback(() => {
async function setFilterValue() {
let filterValue = await AsyncStorage.getItem('filterValue');
let inputValue = JSON.parse(filterValue);
if (gpsFilterValue === null) {
setGpsFilterValue(inputValue);
console.log('null')
// setRefreshing(true)
} else if (inputValue !== parseInt(gpsFilterValue)) {
setGpsFilterValue(inputValue);
console.log('refreshing1')
setTimeout(() => {
console.log(gpsFilterValue)
}, 1000);
//console.log(inputValue + ' ' + gpsFilterValue)
//setRefreshing(true)
} else {
console.log('test')
}
}
setFilterValue();
}, [])
);
When I debug the gpsFilterValue in the setTimeout it stays undefined, but when I make a button in the render to debug the gpsFilterValue state value and press it, it has updated. How come the values are different?

Answer 1

From the looks of it gpsFilterValue is part of your state as you have a state setter being invoked in the callback. However, your useCallback isn't listing gpsFilterValue as a dependency (that empty array that is the second parameter to useCallback. Add it to that dependency list and you should see the updated value.
useFocusEffect(
useCallback(() => {
async function setFilterValue() {
let filterValue = await AsyncStorage.getItem('filterValue');
let inputValue = JSON.parse(filterValue);
if (gpsFilterValue === null) {
setGpsFilterValue(inputValue);
console.log('null')
// setRefreshing(true)
} else if (inputValue !== parseInt(gpsFilterValue)) {
setGpsFilterValue(inputValue);
console.log('refreshing1')
setTimeout(() => {
console.log(gpsFilterValue)
}, 1000);
//console.log(inputValue + ' ' + gpsFilterValue)
//setRefreshing(true)
} else {
console.log('test')
}
}
setFilterValue();
}, [gpsFilterValue])
);