So basically the issue was that I was not correctly applying(or ignoring lint error) this: //eslint-disable-next-line react-hooks/exhaustive-deps I should have applied it above the last line of that useEffect hook. The correct way to fix those kind of issues is this:

  useEffect(() => {
    if (isTimeRunning && timeRemaining > 0) {
      setTimeout(() => {
        setTimeRemaining((time) => time - 1);
      }, 1000);
    } else if (timeRemaining === 0) {
      return endGame();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [timeRemaining, isTimeRunning]);


You shouldn't be calling the function when adding it to the dependencies, but rather you should pass the function reference.

Try this: [timeRemaining, isTimeRunning, endGame]

Related Query

More Query from same tag