Hi I'm currently trying to build a running app similar to the UnderArmor running app in React Native. The features work but after a couple of minutes of using the app on the simulator the computer starts to overheat and the app's performance significantly decreases, after a bit it no longer becomes responsive. Am I making too many calculations per frame? Thank for for your help
const { width, height } = Dimensions.get('window')const LATITUDE_DELTA = 0.007;const LONGITUDE_DELTA = 0.007;const LATITUDE = 37.78825;const LONGITUDE = -122.4324;var email = "";const RunMapScreen = () => { const paperTheme = useTheme(); const [state, setState] = useState({ isActive: false, close: true, routeCoordinates: [], distanceTravelled: 0, prevLatLng: {}, latitude: LATITUDE, longitude: LONGITUDE, seconds: 0, now: moment(), then: moment(), timeElapsed: "00:00:00", startCounter: 0, speedCounter: 1, speed: 0, averageSpeed: 0, isModalVisible: false, email: "grt", }); const [isModalVisible, setModalVisible] = useState(false); useEffect(() => { this.watchID = navigator.geolocation.watchPosition((position) => { const newLatLngs = { latitude: position.coords.latitude, longitude: position.coords.longitude } const positionLatLngs = _.pick(position.coords, ['latitude', 'longitude']); handleUpdates(position.coords.latitude, position.coords.longitude, newLatLngs, positionLatLngs, position.coords.speed); }); return () => { navigator.geolocation.clearWatch(watchID); } }, [state]); const handleUpdates = (lat, long, newLatLngs, positionLatLngs, speedVal) => { setState(state => ({ ...state, latitude: lat, longitude: long })); if (state.isActive) { setState(state => ({ ...state, routeCoordinates: state.routeCoordinates.concat(positionLatLngs), distanceTravelled: state.distanceTravelled + calcDistance(newLatLngs), prevLatLng: newLatLngs, now: moment(), timeElapsed: moment.utc(moment(state.now, "DD/MM/YYYY HH:mm:ss").diff(moment(state.then, "DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss"), speedCounter: state.speedCounter + 1, speed: speedVal, averageSpeed: ((state.averageSpeed * (state.speedCounter - 1) + state.speed) / state.speedCounter), })); } }; const calcDistance = (newLatLng) => { const prevLatLng = state.prevLatLng; return (haversine(prevLatLng, newLatLng) || 0); }; const openIsActive = () => { var now; if (!state.isActive && state.startCounter === 0) { setState(state => ({ ...state, timeElapsed: moment.duration(state.now.diff(state.then)), then: moment(), startCounter: 1 })); } else if (state.isActive && state.startCounter === 1) { now = { ...state.now }; } else if (!state.isActive && state.startCounter === 1) { var then = { ...state.then }; var diff = -state.now.diff(now); setState(state => ({ ...state, then: moment(then).add(diff) })); } setState(state => ({ ...state, isActive: !state.isActive })); } const toggleModal = () => { setState(state => ({ ...state, isModalVisible: !state.isModalVisible })); }; const getMapRegion = () => ({ latitude: state.latitude, longitude: state.longitude, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA });