25+5 Timer goes crazy after a while

I am trying to make a 25+5 timmer using React. But when I try to update the state every second, it goes well the first 20 seconds, and then start to act weird, like changing to random numbers before setting on the correct one, and when it reach the second 24 it just goes crazy and keep changing numbers random

This is the code that I am using

  const intervalId = window.setInterval(function () {
    timerController();
  }, 1000);

  function timerController() {
    if (onPause) return;
    let newMin = timer[0];
    let newSec = timer[1];
    if (newSec == 0) {
      newSec = 59;
      newMin--;
      //if newMin 00 sound alarm
    } else {
      newSec--;
    }
    setTimer([newMin, newSec]);
  }

Any idea of whats happening? This is the codepen:

Hi @rich4shioo
I ran into similar issues on this project. I suggest reading up/googling setInterval and clearInterval and really diving into how they work, it will help a lot now and in the future. That being said I can tell you from my own issues on this project its best to call a clearInterval before that interval is called every time to avoid multiple instances of timerController() running

1 Like

So I should setInverval and clearInterval every second? That wont affect performance? I wish there were something like Update () to make thing easiers >.<

This is why i suggest taking a few min to research the functions and how they work, but essentially you run the setInterval , then when I pause it it runs a new instance of setInterval , then when i hit play it runs setInterval yet again now there is 3 instances of timerController() one is running then returning because its paused but will re run in 1000ms when (onPause) is now false so it runs like pressing play … you now have 3 timers running all at once

I would take 10 or 15 minutes to research it a bit then put a clearInterval call everywhere you need the timer to stop and/or every time the timerController() is called run a clearInterval to make sure there is only one instance running at a time

Ok I will research over it thanks, but I am not sure thats the problem here, since there is nothing in the code that “restart” the counter, at least no yet. So there is no multiple instances of timerController. The pause start, is not in use yet, even if I remove them the problem persists. I thinks it has something to do with useEffect, I am trying to learn how it works, but not sure if it will fix it neither

I’m only clicking the play/pause button. This is why i suggest the research on setInterval and clearInteraval. When you setInteraval on timeController() that interval is going to run that function once every 1000ms untill you specifically tell it not to with clearInterval. When I click pause then click play again it runs 2 more intervals that run timeController() every 1000ms. Now you have 3 intervals running every 1000ms and calling timeController(). I included a snippet for you to try but I still recommend doing some research on set and clear Interval

This is not a final solution but just an example of what i mean