I am running a function every second and observing the times it is executed comparing with its exact executed time.
When I run the below code using expo's open web, the component's render/execution speed is fine and i can see that the Date.now time goes back'n forth with a rough variance of 10 milliseconds, which is great.
However when i run this code on my phone using expo go. The execution speed is slowed down by heaps and drift progressively gets larger. Which i speculate is caused by expo go simulating the environment.
Update: But then is when things get really interesting: after the apk compiled (expo build:android -t apk), the executed time of each count is actually consistently less than 1 second. As in the 5th time executed the time from Date might be 1637372693 123, the 6th time's execution time would be 1637372694 110.
This has being observed for over 400 executions and can potentially be a bigger problem. I'd like to know a systematic way to resolve this.
import React, { useEffect, useState } from "react";
import {Text,Button, View} from 'react-native';
export default function Home(props){
const [timerCount, setTimer] = useState(parseInt(props.time))
const [timepair,setTimePair] = useState([[0,0]])
const [start,setStart] = useState(false)
useEffect(() => {
let interval = setInterval(() => {
setTimer(lastTimerCount => {
//lastTimerCount <= 0 && clearInterval(interval);
//console.log(lastTimerCount)
if (lastTimerCount === 0){
return props.time
} else{
return lastTimerCount - 1
}
});
setTimePair(lasttimepair=>{
let timepair = JSON.parse(JSON.stringify(lasttimepair))
timepair.push([timepair[timepair.length-1][0]+1,(new Date()).getTime()])
return timepair
});
}, 1000) //each count lasts for a second
//cleanup the interval on complete
return () => clearInterval(interval)
}, []);
return (
<View>
<Text>{timerCount}</Text>
<Text>{timepair[timepair.length-1]} </Text>
<Button title = "start" onPress = {()=>setStart(startstatus=>{return !startstatus})}/>
<Text>{String(start)}</Text>
</View>
)
}
