React useEffect empty dependency

Question

The problem: when I remove the dependency array in useEffect the timer never stops. But when I add a dependency array in useEffect the timer gets stuck on 5.

How can I solve this?

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [target, setTarget] = useState([]);
  const [score, setScore] = useState(0);
  const [timer, setTimer] = useState(5);

  const newQuestion = () => {
    const minimum = 1;
    const maximum = 10;
    const int1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    const int2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    setTarget([int1, int2]);
  };

  const handleReset = () => {
    setScore(0);
    setTimer(5);
  };

  useEffect(() => {
    newQuestion();
  }, [score]);

  useEffect(() => {
    let interval = setInterval(() => {
      setTimer((prev) => {
        if (prev === 1) clearInterval(interval);
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  });

  const handleAnsewer = () => {
    const total = target[0] + target[1];

    if (total === Number(inputValue)) {
      setScore(score + 1);
    } else {
      if (score > 0) {
        setScore(score - 1);
      }
    }

    setInputValue("");

    newQuestion();
  };

  return (
    <>
      <h1>Random Math Quiz</h1>

      <h1> {target.join(" + ")} </h1>

      <h1> Timer: {timer} </h1>

      <input placeholder="Answer" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

      <div>
        <button disabled={timer === 0} onClick={handleAnsewer}>
          {" "}
          Submit{" "}
        </button>
      </div>

      <div>
        <button onClick={handleReset}> play again </button>
      </div>

      {score === 10 && <h1> (Score: 10 / {score}) Congrate you are master in Math!</h1>}
      {score <= 9 && timer < 1 && <h1> ( Score: 10 / {score}) Oh boy this is the math class!</h1>}
    </>
  );
};

export default App;

Yes I forgot to save the sandbox codesandbox.io/s/zen-ride-gio2eb here is the quiz app the problem is here when I remove the dependency array in useEfffect the timer is got - an infinite number and the play again button reset the timer to 5 but when I add dependency array in useEffect the timer is stuck on 5. — ahmad
– ahmad, Commented Apr 11, 2022 at 9:12

Gass · Accepted Answer · 2022-04-12 06:04:59Z

1

Change your useEffect containing the setInterval method with this one:

useEffect(() => {
  if (timer > 0){ 
    setTimeout(() => {setTimer(timer - 1)}, 1000)
  }
}, [timer])

I think the approach with setTimeout() is better because you don't need to clear intervals or any of that nonsense.

How it works

Is the condition met?
If yes, update setTimer to new time timer - 1 after 1000ms
timer changes and so it will trigger useEffect and the component will re-render
This will go on until the timer doesn't change. When it hits 0

edited Apr 12, 2022 at 6:04

answered Apr 11, 2022 at 17:09

Gass

9,6405 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React useEffect empty dependency

1 Answer 1

How it works

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

How it works

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related