How to reset the timer using UseEffect React Hooks

Question

I'm currently trying to make a pomodoro timer. One feature I noticed on some timers is that if you click reset time, it'll go to the default time (usually 15 minutes).

I want it to be a little more advanced so that when you click reset, it will reset to whatever value you set the timer to.

For example, when you open the screen the default time is 15 minutes. If you add 5 minutes, then press start, then press reset, it should reset to 20 minutes. Instead, my code is resetting it to 15.

Can anyone think of a way to reset time?

Apologies if it's a bad explanation. Thank you in advance.

Here's my code so far using React Hooks:

import './App.css';

function App() {
  const [session, setSession] = useState(5)
  const [timer, setTimer] = useState(2)
  const [isRunning, setIsRunning] = useState(false)
  const [resetTime, setResetTime] = useState(900)

  let time = new Date(timer * 1000).toISOString().substr(11, 8);

  function sessionIncrement() {
    setSession(prevSession => session + 1)
  }
  function sessionDecrement() {
    if (session > 0) {
      setIsRunning(false)
      setSession(prevSession => prevSession > 0 && prevSession - 1)
    }
  }

  function resetTimer() {
    setIsRunning(false)
    setTimer(resetTime)
  }

  function increment() {
    setIsRunning(false);
    setTimer(prevTimer => prevTimer + 300);
  }

  function decrement() {
    setIsRunning(false);
    setTimer(prevTimer => prevTimer - 300);
  }


  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        setTimer(prevTimer => prevTimer > 0 && prevTimer - 1)
      }, 1000);
      if (timer === 0) {
        sessionDecrement()
        setIsRunning(false)
      }
      return () => clearInterval(interval)
    }
  }, [isRunning, session, timer])

  useEffect(() => {
    setResetTime(timer)
  }, [])


  return (
    <div className="App">
      <h1>Session #{session}</h1>
      <button onClick={() => sessionDecrement()}>-</button>
      <button onClick={() => sessionIncrement()}>+</button>
      <h1>{time}</h1>
      <button onClick={() => setIsRunning(false)} >Pause</button>
      <button onClick={() => setIsRunning(true)}>Start</button>
      <button onClick={() => resetTimer()}>Reset</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => increment()}>+</button>
    </div>
  );
}

export default App;

Answer 1

The first thing you'll want to do is change the timer and reset time to use the same value:

const initialTime = 900;
const [session, setSession] = useState(5);
const [timer, setTimer] = useState(initialTime);
const [isRunning, setIsRunning] = useState(false);
const [resetTime, setResetTime] = useState(initialTime);

Then, you'll want to change increment and decrement functions so that they change the reset value as well as the timer value:

function increment() {
  setIsRunning(false);
  setTimer((prevTimer) => prevTimer + 300);
  setResetTime((prevResetTime) => prevResetTime + 300);
}

function decrement() {
  setIsRunning(false);
  setTimer((prevTimer) => prevTimer - 300);
  setResetTime((prevResetTime) => prevResetTime - 300);
}

Answer 2

If I understand you right, you just need to set resetTime to the same value as timer, in the increment and decrement function. Like this:

import './App.css';

function App() {
  const [session, setSession] = useState(5)
  const [timer, setTimer] = useState(2)
  const [isRunning, setIsRunning] = useState(false)
  const [resetTime, setResetTime] = useState(900)

  let time = new Date(timer * 1000).toISOString().substr(11, 8);

  function sessionIncrement() {
    setSession(prevSession => session + 1)
  }
  function sessionDecrement() {
    if (session > 0) {
      setIsRunning(false)
      setSession(prevSession => prevSession > 0 && prevSession - 1)
    }
  }

  function resetTimer() {
    setIsRunning(false)
    setTimer(resetTime)
  }

  function increment() {
    const newTime = timer + 300
    setIsRunning(false);
    setTimer(newTime);
    setResetTime(newTime)
  }

  function decrement() {
    const newTime = timer - 300
    setIsRunning(false);
    setTimer(newTime);
    setResetTime(newTime)
  }


  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        setTimer(prevTimer => prevTimer > 0 && prevTimer - 1)
      }, 1000);
      if (timer === 0) {
        sessionDecrement()
        setIsRunning(false)
      }
      return () => clearInterval(interval)
    }
  }, [isRunning, session, timer])

  useEffect(() => {
    setResetTime(timer)
  }, [])


  return (
    <div className="App">
      <h1>Session #{session}</h1>
      <button onClick={() => sessionDecrement()}>-</button>
      <button onClick={() => sessionIncrement()}>+</button>
      <h1>{time}</h1>
      <button onClick={() => setIsRunning(false)} >Pause</button>
      <button onClick={() => setIsRunning(true)}>Start</button>
      <button onClick={() => resetTimer()}>Reset</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => increment()}>+</button>
    </div>
  );
}

export default App;