CODEWITHSUNDEEP
javascriptreactjs
normalDev
normalDev

Reputation: 147

SetInterval only run for first time

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

Upvotes: 2

Views: 402

Answers (3)

Youssouf Oumar
Youssouf Oumar

Reputation: 46291

It is because when you call setTime multiple times (yourselves or in a setIntervall) React will wait before picking the last one. To avoid this, you should pass a function updater to set your state:

 const coutRef = useRef();

 const startCountDown = () => {
    coutRef.current = setInterval(() => {
      setTime(time => time - 1);
    }, 1000);
 };

 useEffect(()=>{
   if (time === 0) {
      clearInterval(coutRef.current);
    }
 },[time])

Upvotes: 0

Wraithy
Wraithy

Reputation: 2056

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

Upvotes: 0

Quentin
Quentin

Reputation: 944530

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);

Upvotes: 5

Related Questions