Need help ! Creating a custom react countdown

I’m implementing a running clock that receives its time value from user inputs and allows the user to start, pause/resume the countdown, and reset the clock.

what i want to create :

  1. Time display:
  • initial value is 00:00;
  • time is displayed in mm:ss format;
  • 1 minute, 5 seconds should be displayed as: 01:05;
  • 1 minute, 65 seconds should be displayed as: 02:05.
  1. Inputs:
  • changing input values does not change the value displayed in running countdown;
  • inputs do not need to have max or min attributes;
  • the clock doesn’t need to handle negative values;
  1. Behavior:
  2. On a START button click, set the clock value displayed it with the time calculated from the inputs and start counting down;
  3. Once the clock is running, update the displayed time every second;
  4. Once the clock is running and the START button is clicked, restart the clock with the same time originally provided in the inputs;
  5. Once the countdown is done and the clock reaches 00:00, stop counting and keep displaying 00:00;
  6. On a PAUSE / RESUME button click, pause or resume the clock appropriately:
    * PAUSE puts the countdown on hold;
    * RESUME resumes the countdown from where it left off;
  7. Once the RESET button is clicked, both inputs should be reset to 0;
  8. Once the RESET button is clicked, the time is displayed and it should be reset to 00:00.

my code is here - react-countdown - CodeSandbox
most of the basic things I have down but not able to figure out how should h handle the countdown functionality. please help me


  React.useEffect(() => {
    if (isStart) {
      const timerId = setInterval(() => tick(), 1000);
      return () => clearInterval(timerId);
  }, [isStart, sec, min]);

looks weird to me.

You are restarting the timer every time isStart, sec, or min changes? I would expect to just have it trigger off the first one. I would expect to store the timer id in a state variable.

In this here:

  const tick = () => {
    if (min === 0 && sec === 0) {
    } else if (sec === 0) {
      setMin(min - 1);
    } else {
      setSec([sec - 1]);

First of all, I think you should reconsider this line:

      setSec([sec - 1]);

Look at that closely.

You also have this later:

  React.useEffect(() => {
    if (sec >= 60) {
      setMin(min + 1);
      setSec(sec - 60);
  }, [sec]);

I think these two are fighting with each other. I might suggest combining those two.

Another thing to consider, is that doing this math is complicated. What if you just stored the timer in seconds? Then you could convert to min/sec for the display. And you can convert from min/sec when reading the input. I think that is going to be easier than counting in sexagesimal. Not only easier, but I think the code will be easier to read - always a win.