React native call useEffect when variable has changed - react-native

Question

I have two components Place and Map. Every time when user in component Place clicks button "Show on Map" I open Map and get route params latitude/longitude from Place and I want to render area near marker. I try to set current latitude/longitude to the state to rerender component near marker but it doesn't work and my map opens at the same place where I closed it. The only option I found is to make component unmount when close Map but I don't think it is the best solution.
Place:
const onNavigationTap = () => {
navigation.navigate('Map', {
destination: data["data"].coordinates
});
}
return(
<TouchableOpacity onPress={() => onNavigationTap()}>
<View style={{flexDirection: "row", alignItems: "center"}}>
<Ionicons size={hp('5%')} name={'navigate-circle-outline'} color='white'/>
</View>
</TouchableOpacity>
)
Map:
const [currentDestination, setCurrentDestination] = useState(undefined);
if (route.params) {
var {destination} = route.params;
}
useEffect(() => {
setCurrentDestination(destination);
}, [destination]);
return (
<MapView
mapType={satellite ? "hybrid" : "standard"}
style={{flex: 1}}
showsUserLocation={true}
followsUserLocation={true}
provider={PROVIDER_GOOGLE}
initialRegion={
currentDestination ?
{
longitude: parseFloat(currentDestination.longitude),
latitude: parseFloat(currentDestination.latitude),
longitudeDelta: 0.0043,
latitudeDelta: 0.0034,
} : {
latitude: 53.227200,
longitude: 50.243698,
latitudeDelta: 3,
longitudeDelta: 3,
}
}
>
</MapView>
)

Answer 1

why not use directly routes.params like this :
<MapView
mapType={satellite ? 'hybrid' : 'standard'}
style={{ flex: 1 }}
showsUserLocation={true}
followsUserLocation={true}
provider={PROVIDER_GOOGLE}
initialRegion={
route.params.destination
? {
longitude: parseFloat(route.params.destination.longitude),
latitude: parseFloat(route.params.destination.latitude),
longitudeDelta: 0.0043,
latitudeDelta: 0.0034,
}
: {
latitude: 53.2272,
longitude: 50.243698,
latitudeDelta: 3,
longitudeDelta: 3,
}
}></MapView>
like this whenever you call place , routes.params will be new value