Stale closure problem react native AppState

Question

I have a react native component that I want to check if a specific value is "true" in scope state, and then do some things but it always read old state in callback function.

const [scope, seScope] = useState({
    isInScope: false,
    loading: true,
    isGranted: false,
})

const stateHandler = useCallback((state) => {
    if (state === 'active') {
        // it's always false not matter
        if (!scope.isGranted) {
            makeLocationPermission()
        }
    }
}, [scope])

console.log(scope.isGranted)
// in here isGranted is true

useEffect(() => {
    makeIsGrantedTrue()
    AppState.addEventListener('change', stateHandler)
    return () => {
        AppState.removeEventListener('change', stateHandler)
    }
}, []) 

Answer 1

ok I solve this just by putting "scope" on use effect dependency. I don't know why ?! it must be on useCallback dependency.

useEffect(() => {
    makeIsGrantedTrue()
    AppState.addEventListener('change', stateHandler)
    return () => {
        AppState.removeEventListener('change', stateHandler)
    }
}, [scope])