React Timer, React Native Timer, - reactjs

Question

This is normal timer in React Native
There is something wrong with countDown function, I've been trying to figure it out for hours already.
I check line by line useEffect function is right, convertingTotalTime also works fine.
There must be something wrong with setState functions, as they are not syncronus, but CountDown function is called every second, you can try code snippet ...
can you please help me understand what's wrong with code?
import React, { useEffect, useState } from "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js";
import { Button, StyleSheet, Text, View } from "https://cdnjs.cloudflare.com/ajax/libs/react-native-web/0.17.1/index.js";
export default function App() {
const [totalTime, setTotalTime] = useState(50000);
const [playMode, setPlayMode] = useState(false);
const [progress, setProgress] = useState(100);
const [timeString, setTimeString] = useState(`00 : 00`);
const [second, setSec] = useState(0);
const [minute, setMin] = useState(0);
useEffect(() => {
if (playMode && totalTime > 0) {
let myInterval = setInterval(() => {
countDown();
console.log("countdown");
return () => {
clearInterval(myInterval);
};
}, 1000);
}
}, [playMode]);
const countDown = () => {
// console.table(hour, minute, second);
let [sec, min] = [second, minute];
let _totalTime = totalTime;
_totalTime = _totalTime - 1000;
sec = sec - 1;
if (sec == 0 && min >= 1) {
min = min - 1;
}
if (min == 0 && sec == 0) {
// coundown finished
console.warn("counter must stop");
}
setSec((prevState) => sec);
setMin((prevState) => min);
setTotalTime((prevState) => _totalTime);
setTimeString(
`${min < 10 ? "0" + min : min} : ${sec < 10 ? "0" + sec : sec} `
);
// this function is for later use => circular progress bar
setProgress((prevProgress) => {
if (prevProgress == 0) {
return 100;
}
let x = 100 / _totalTime;
return progress - x;
});
};
const convertTotalTime = () => {
let timeToConvert = totalTime;
let min = +Math.floor(timeToConvert / 60 / 1000);
timeToConvert -= Math.floor(timeToConvert / 1000);
setMin((prevState) => prevState + min);
let sec = +Math.floor(timeToConvert / 1000);
timeToConvert -= Math.floor(timeToConvert);
setSec((prevState) => prevState + sec);
};
const startTimerHandler = () => {
convertTotalTime();
setPlayMode(true);
};
return (
<View style={styles.container}>
<Text>{timeString}</Text>
<Button onPress={startTimerHandler} title="Start" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-native-web/0.17.1/index.js"></script>

Answer 1

Your import seems to be wrong...
import React, { useEffect, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
Cheers, I hope you solved your problem!

Answer 2

So the answer to this is following
In class based Components we usually destructure the state, update value and setIt again.
See Code Below
```
export default function App() {
const [second, setSec] = useState(0);
const [minute, setMin] = useState(0);
...
const countDown = () => {
// state destructure
let [sec, min] = [second, minute];
// update
sec = sec - 1;
// set it again
setSec(sec)
// the problem is console.log(second == sec) FALSE
// here state wont update for no reason....
// the following is kind of fix
setSec(prevState => prevState -1)
// state updates now BUT console.log(second == sec) FALSE !
// code below won't ever work
if (minute == 0 && second == 0) {
// coundown finished
console.warn("counter must stop");
}
}
```
So here is the only solution I found ...
```
export default function App() {
const [second, setSec] = useState(0);
const [minute, setMin] = useState(0);
...
const countDown = () => {
let [sec, min] = [second, minute];
// keep track of both state and local variable ...
sec = sec - 1;
setSec((prevState) => prevState - 1);
if (sec == 0 && min >= 1) {
min = min - 1;
setMin((prevState) => prevState - 1);
}
if (min == 0 && sec == 0) {
// coundown finished
console.warn("counter must stop");
}
...
};
```