Build a 25-5 Clock and React useEffect

Programming JavaScript
1

Tell us what’s happening:
Hey guys, I’m doing the 25-5 clock in the Front End Development Libraries course, and I’m trying to use the React useEffect hook to make the timer re-render every second. I expected the below code to re-render a decremented value every second, but it is causing a decrement and re-render dozens of times per second, and leading to maximum depth exceeded. Where have I gone wrong?

Your code so far

  useEffect(() => {
    if (isRunning) {
      setTimeout(setTimeLeft(timeLeft - 1), 1000);
    }
  }, [timeLeft, isRunning]);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock

Link to the challenge:

2

Check the doc below to see how to use setTimeOut

3

Thanks, I got it to work but I don’t know why it works. I need to read up on execution context.

4

setTimeOut(()=>somestuff…, 1000)

you need to define a function (anonymous in this case) to call the setState

I tested this locally earlier and it worked. I don’t see a full copy of your code so I can only guess some things. If you still have some issues understanding you can mention what it is and would be good to have a link to code pen or similar for reference.

5

Yeah, I realised I had mixed up function passing with function invocation. I wrapped the first argument of setTimeout() in a function and it works fine.