SetInterval only run for first time

Question

I learning javascript, react, and i tried to count from 10 to 0, but somehow the timer only run to 9, i thought setInterval run every n time we set (n can be 1000ms, 2000ms...)

Here is the code

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [time, setTime] = useState(10);

  const startCountDown = () => {
    const countdown = setInterval(() => {
      setTime(time - 1);
    }, 1000);
    if (time === 0) {
      clearInterval(countdown);
    }
  };

  return (
    <div>
      <button
        onClick={() => {
          startCountDown();
        }}
      >
        Start countdown
      </button>
      <div>{time}</div>
    </div>
  );
}

Here is the code: https://codesandbox.io/s/class-component-ujc9s?file=/src/App.tsx:0-506

Please explain for this, i'm so confuse, thank you

Answer 1

time is the value read from the state (which is the default passed passed into useState ) each time the component renders.

When you click, you call setInterval with a function that closes over the time that came from the last render

Every time the component is rendered from then on, it reads a new value of time from the state.

The interval is still working with the original variable though, which is still 10 .

---

State functions will give you the current value of the state if you pass in a callback. So use that instead of the closed over variable.

setTime(currentTime => currentTime - 1);

Answer 2

Just use callback in your setState function because otherwise react is working with old value of time:

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [time, setTime] = useState(10);

  const startCountDown = () => {
    const countdown = setInterval(() => {
      setTime((prevTime)=>prevTime - 1);
    }, 1000);
    if (time === 0) {
      clearInterval(countdown);
    }
  };

  return (
    <div>
      <button
        onClick={() => {
          startCountDown();
        }}
      >
        Start countdown
      </button>
      <div>{time}</div>
    </div>
  );
}

---

edit: You can store your interval identificator in useRef, because useRef persist through rerender and it will not cause another rerender, and then check for time in useEffect with time in dependency

import "./styles.css";
import React, { useEffect, useRef, useState } from "react";
export default function App() {
  const [time, setTime] = useState(10);
  const interval = useRef(0);
  const startCountDown = () => {
    interval.current = setInterval(() => {
      setTime((prevTime) => prevTime - 1);
    }, 1000);
  };
  useEffect(() => {
    if (time === 0) {
      clearInterval(interval.current);
    }
  }, [time]);

  return (
    <div>
      <button
        onClick={() => {
          startCountDown();
        }}
      >
        Start countdown
      </button>
      <div>{time}</div>
    </div>
  );
}

working sandbox: https://codesandbox.io/s/class-component-forked-lgiyj?file=/src/App.tsx:0-613