State is getting undefined inside the useCallBack hook I think it is not getting scope to the state variable

const [selectedLocation, setSelectedLocation] = useState()
const selectLocationHandler = (event) => {
    setSelectedLocation({
        lat: event.nativeEvent.coordinate.latitude,
        lng: event.nativeEvent.coordinate.longitude
    })
    console.log('set location', selectedLocation)
}

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [])

set location Iam getting Object { "lat": 37.775030512686214, "lng": -122.4273883345241, }

where as savelocation is undefined in console

State is getting undefined inside the useCallBack hook I think it is not getting scope to the state variable

const [selectedLocation, setSelectedLocation] = useState()
const selectLocationHandler = (event) => {
    setSelectedLocation({
        lat: event.nativeEvent.coordinate.latitude,
        lng: event.nativeEvent.coordinate.longitude
    })
    console.log('set location', selectedLocation)
}

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [])

set location Iam getting Object { "lat": 37.775030512686214, "lng": -122.4273883345241, }

where as savelocation is undefined in console

• javascript
• react-native
• react-navigation
• react-hooks

1 Answer 1

You need to provide selectedLocation as a dependency. Else the callback will not update if the state changes.

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [selectedLocation])

If you provide an empty array as dependency the useCallback function will always have the initial state and never update (selectedLocation). This is the same behaviour useEffect has