1

setInterval not triggering in useEffect. My log only prints twice.

export default function SwapTimer() {
    const [time, setTime] = useState(15);

    const minus = () => setTime(time - 1);

    useEffect(() => {
        let interval = setInterval(() => minus(), 1000);
            return () => clearInterval(interval)
    }, [setTime]);

    console.log(time);

    return (
        <Row className={css.info}>
            {time}
        </Row>
    );
}

Click here to see browser console

Bayarkhuu
  • 11
  • 2
  • It's a bit subtle, but `setTime` never changes (state setters from `useState` are stable, the same function is returned every time), so your `useEffect` only runs once, just after component mount. It closes over the `minus` function created for the **first** call to `SwapTimer`, which in turn closes over the **first** `time` variable (which contains `15`). Your interval timer then calls that function repeatedly, constantly saying "set `time` to `15 - 1`. Whenever updating state based on existing state, you're best off using the callback version of the state setter: `setTime(time => time - 1)`. – T.J. Crowder Jan 28 '22 at 11:32

0 Answers0