I am trying to display the countdown timer starting at 10, and decreasing down to 0 each second using setState and setInterval for RN.
My view is updating, but the timer is not working properly. It goes quite fast and skips around between 9 - 0 randomly. No errors are shown either within my code.
import { StyleSheet, Text } from 'react-native'
import React, {useState} from 'react'
export default function Timer() {
// Countdown timer logic upon click event
const [time, setTime] = useState(10)
setInterval(() => {
setTime(time => time > 0 ? time - 1 : time = 10)
},1000)
return (
<Text style={styles.timer}>{time}</Text>
)
}
const styles = StyleSheet.create({
timer: {
fontWeight: '700',
fontSize: 24,
color: '#00C261',
fontFamily: 'Roboto',
width: 30,
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center'
}
})
As for now, you calling the interval on each render (check by logging in the interval), after few renders there is a "render race", instead try put the logic in dedicated hook so the interval will only called once.
Also notice the expression time = 10 returns 10 so your code works by mistake, you should treat the state as immutable.
export default function Timer() {
const [time, setTime] = useState(10);
useEffect(() => {
const intervalID = setInterval(() => {
setTime((time) => (time > 0 ? time - 1 : 10));
}, 1000);
return () => {
clearInterval(intervalID);
};
}, []);
return <Text style={styles.timer}>{time}</Text>;
}