State not resetting. Why is it running concurrently when reset is pressed?

Question

I am learning react. When I click the reset timer button, instead of resetting the timer, a new second timer starts running concurrently. If I click the same button the third time, a new third timer starts at zero also running concurrently.

The same is happening when I click another button that says Jump 10 seconds. It's like its creating a new state instead of resetting the state.

Here is my app.jss code

function App() {

  const [timeSpent, setTimeSpent] = useState(0);

  setTimeout(() => setTimeSpent(timeSpent + 1),
    1000
  )

  //Reset the timer
  const resetTimer = () => setTimeSpent(0);

  return (
    <>

      <Timer secondsPassed={timeSpent} />

      <button onClick={resetTimer}>Reset Timer</button>
      <button onClick={() => setTimeSpent(timeSpent +10)}>Jump 10 Seconds</button>
    </>
  );
}

export default App;

Here is my Timer.js code

function Timer({secondsPassed}) {

    const formatting = () => {
        if (secondsPassed < 60) {
            return secondsPassed + ' Sec';
        } else {
            return Math.floor(secondsPassed/60) + ' Mins';
        }
    }

    return (
        <div>
            <h3>Time Spent: {formatting()}</h3>
        </div>
    )
}

Does this answer your question? [Countdown timer in React](https://stackoverflow.com/questions/40885923/countdown-timer-in-react) — Emile Bergeron, Dec 23 '21 at 17:32
TL:DR; the `setTimeout` (or [`setInterval`](https://stackoverflow.com/q/53024496/1218980), whichever you choose) must be used inside a `useEffect`. — Emile Bergeron, Dec 23 '21 at 17:32

score 0 · Answer 1 · answered Dec 24 '21 at 13:06

Based on @Emile Bergeron comment, you should use setInterval inside a useEffect and for updating the state you should get the latest timeSpent which has been passed into the callback function that I passed to setTimeSpent.

 const {useState, useEffect} = React;
 
function App() {
  const [timeSpent, setTimeSpent] = useState(0);
  useEffect(() => {
    setInterval(() => setTimeSpent((time) => time + 1), 1000);
  }, []);

  //Reset the timer
  const resetTimer = () => setTimeSpent(0);

  return (
    <div>
      <Timer secondsPassed={timeSpent} />

      <button onClick={resetTimer}>Reset Timer</button>
      <button onClick={() => setTimeSpent(timeSpent + 10)}>
        Jump 10 Seconds
      </button>
    </div>
  );
}

function Timer({ secondsPassed }) {
  const formatting = () => {
    if (secondsPassed < 60) {
      return secondsPassed + " Sec";
    } else {
      return Math.floor(secondsPassed / 60) + " Mins";
    }
  };

  return (
    <div>
      <h3>Time Spent: {formatting()}</h3>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

State not resetting. Why is it running concurrently when reset is pressed?

1 Answers1