Unsubscribe from watchPositionAsync with useEffect return function - reactjs

Question

Using react native with expo-location for a mobile app, I would like to unsubscribe from Location.watchPositionAsync which returns a promise with a remove() method to unsubscribe.
I call the function within a useEffect hooks, but i don't know how to correctly return a cleanup function with the watchPositionAsync promise resolved.
Any suggestions?
import { useState, useEffect } from "react";
import { Text, View } from "react-native";
import * as Location from "expo-location";
export const GpsComponent = function () {
const [location, setLocation] = useState(null);
useEffect(() => {
const positionSubscription = async () => {
const positionSubscribe = await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.BestForNavigation },
(newLocation) => {
setLocation(newLocation);
}
);
return positionSubscribe;
};
/*return () => {
positionSubscription.remove();
console.log("Unsubscribed from WatchPositionAsync");
};*/
}, [setLocation]);
return (
<View>
<Text>{JSON.stringify(location)}</Text>
</View>
);
};

Answer 1

This will create the watchPositionAsync subscription and pass the correct remove function as the cleanup of the useEffect. A dummy subscription is created initially with a nop remove function.
useEffect(() => {
// nop subscription. in case not successful
let subscription = { remove: () => {} }
// subscribe async function
const subscribe = async () => {
return await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.Highest },
(newLocation) => {
setLocation(newLocation)
}
)
}
// return subscription promise
subscribe()
.then(result => subscription = result)
.catch(err => console.warn(err))
// return remove function for cleanup
return subscription.remove
}, [])

Answer 2

I finally found a way to unsubscribe to watchPositionAsync using useRef
import { useState, useEffect, useRef } from "react";
import { Text, View } from "react-native";
import * as Location from "expo-location";
export const GpsComponent = function () {
const [location, setLocation] = useState(null);
const unsubscribe = useRef(() => undefined);
useEffect(() => {
const subscribe= async () => {
const positionSubscription = await Location.watchPositionAsync(
{ accuracy: Location.LocationAccuracy.BestForNavigation },
(newLocation) => {
setLocation(newLocation);
}
);
unsubscribe.current=()=>{positionSubscription?.remove()}
};
return ()=>{unsubscribe.current()}
}, []);
return (
<View>
<Text>{JSON.stringify(location)}</Text>
</View>
);
};
It 's also possible to use an object and modify a property after the async function's promise is resolved.