initial state should not be '0'

[joacyc]

const [timeLeft, setTimeLeft] = React.useState(0); Here,initial state should not be '0',use the argus 'timeToCount' is more better. cause ,'0' is the mark of the beginning and the end,Can cause initialization rendering problems

[alexkhismatulin]

Hey @joacycode I'm not really getting the issue. If you pass 0 as an initial value, timeLeft's going to be 0 as well. Am I missing something? Can you elaborate?

[keezeden]

Hey @alexkhismatulin, I think he is referring to this line here.

Because it defaults to 0, doing any sort of const expired = timeLeft === 0 checks leads to expired being true on the first render (as the state is defaulted to 0).

I think this also plays into this issue

[berkerdemirer]

What is the purpose of the counter if I can't catch the moment it expires? I think this is the fundamental feature that is missing

[ridho-aru]

Maybe it would be good if the hook has internal flag, something like const [timeLeft, { flag }] = useCountDown(initialTime, interval)

and we could do like flag === COUNTDOWN_NOT_STARTED_YET

[azakaryan]

Any updates on this ? . I can't really use the library since, There is no way to determine whether the time is expired or it's very beginning.

[alexkuc]

While less-than-ideal, there is a workaround available:

const [started, setStarted] = useState(false);

useEffect(() => {
  start();
  setStarted(true);
}, []);

useEffect(() => {
  if (started && timeLeft === 0) props.callback();
}, [timeLeft]);

We create a state variable and set its value after we initialise timer. Then, in whatever place we need to check time left, we check if timer has started and then check timeLeft variable. Again, it's a workaround until author can fix the issue permanently.