How do I reset countdown counter in react?

Question

I want reset the countdown counter, I wrote " countdownStatus === COUNTDOWNSTATUS.reset && countdownTimer !== 0 && clearTimeout(() => setCountdownTimer(countdownTimer === 0))"

It only stops counting. But not reset...

Could someone helps me? Thanks

import './App.css';
import { useState } from 'react'
import { useEffect } from 'react';

const COUNTDOWNSTATUS = {
  pause: 0,
  start: 1,
  default: 2,
  reset: 3
}


function App() {

  let [countdownTimer, setCountdownTimer] = useState(60)


  const [countdownStatus, setCountdownStatus] = useState(COUNTDOWNSTATUS.default);
 
  const handelClickCountdownStart = () => setCountdownStatus(COUNTDOWNSTATUS.start);
  const handelClickCountdownPause = () => setCountdownStatus(COUNTDOWNSTATUS.pause);
  const handelClickCountdownReset = () => setCountdownStatus(COUNTDOWNSTATUS.reset);

 
  useEffect(() => {
    countdownStatus === COUNTDOWNSTATUS.start && countdownTimer > 0 && setTimeout(() => setCountdownTimer(countdownTimer - 1), 1000)
    countdownStatus === COUNTDOWNSTATUS.pause && countdownTimer !== 0 && clearTimeout()
    countdownStatus === COUNTDOWNSTATUS.reset && countdownTimer !== 0 && clearTimeout(() => setCountdownTimer(countdownTimer === 0))

  
  })

  return (
    <div className="App">

      <h1>Countdown Timer</h1>
      <h1>{countdownTimer}</h1>
      <button onClick={handelClickCountdownStart}>Start</button>
      <button onClick={handelClickCountdownPause}>Pause</button>
      <button onClick={handelClickCountdownReset}>Reset</button>

    </div>
  );
}

export default App;

Answer 1

There are a few issues with your code.

First, you should implement a dependencie array with the countdownStatus variable, since it's the one you are looking at.

Secondly, you should use setInterval for this situation, and store it's reference to clear the interval on pause, reset or counter reaching 0. Something like this:

import './App.css';
import { useState } from "react";
import { useEffect } from "react";

const COUNTDOWNSTATUS = {
  pause: 0,
  start: 1,
  default: 2,
  reset: 3
};
let intervalId = null;
function App() {
  let [countdownTimer, setCountdownTimer] = useState(60);

  const [countdownStatus, setCountdownStatus] = useState(
    COUNTDOWNSTATUS.default
  );

  const handelClickCountdownStart = () =>
    setCountdownStatus(COUNTDOWNSTATUS.start);
  const handelClickCountdownPause = () =>
    setCountdownStatus(COUNTDOWNSTATUS.pause);
  const handelClickCountdownReset = () =>
    setCountdownStatus(COUNTDOWNSTATUS.reset);

  useEffect(() => {
    switch (countdownStatus) {
      case COUNTDOWNSTATUS.start:
        intervalId = setInterval(() => {
          setCountdownTimer((prevValue) => {
            const newValue = prevValue - 1;
            if (newValue <= 0) clearInterval(intervalId);
            return newValue;
          });
        }, 1000);
        break;
      case COUNTDOWNSTATUS.pause:
        clearInterval(intervalId);
        break;
      case COUNTDOWNSTATUS.reset:
        clearInterval(intervalId);
        setCountdownTimer(60);
        break;
      default:
        break;
    }
  }, [countdownStatus]);

  return (
    <div className="App">
      <h1>Countdown Timer</h1>
      <h1>{countdownTimer}</h1>
      <button onClick={handelClickCountdownStart}>Start</button>
      <button onClick={handelClickCountdownPause}>Pause</button>
      <button onClick={handelClickCountdownReset}>Reset</button>
    </div>
  );
}

export default App;