React Native useState setInterval function not working properly-CodePudding

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'
  }
})

CodePudding user response：

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>;
}