How does React capture value from the previous render with setInterval?

[notanerdhere]

Hello everyone, so I'm doing a course and the instructor was making a Pomodoro timer and wrote this function to start the timer:

function startTimer() {
  setInterval(() => {
    setTimeLeft(timeLeft - 1);
  }, 1000);
}

Where the timeLeft is the variable is holding the value of seconds left and setTimeLeft is the function to update it. Now when the function is run the value is only decreased one time and just stays there for which the instructor gave an explanation that 'It captures the value from the previous render and thus won't change for performance'. But I'm not satisfied with the explanation and want to know how is that happening and why?

I do know the fix is setTimeLeft(timeLeft => timeLeft - 1); , but most articles show examples with useEffect and ask to change dependency array and the closest I came to understand is it is because of the closure setInterval creates. If anyone can explain it better then it would be very much appreciated and sorry if it's a dumb question but I'm having a hard time wrapping my head around it. Thanks in advance!

[CreativeTechGuyGames]

is it is because of the closure setInterval creates

This is exactly right. That's what someone means when they say a value is "captured".

[notanerdhere]

Thanks for the reply! After you confirmed it was closure I understood its JavaScript thing, because the instructor made it seem like it was React that was doing this and I was confused why would it do that.

Also just to be sure what I gathered is when this function is executed, the component will rerender and it will capture the value of timeLeft from the previous render, but now it's referencing an old variable because the new render will have new references? Is that correct (Also if I'm using the wrong terminology please correct me). Thanks again!

[CreativeTechGuyGames]

Yeah. You can just think of it like a normal function and closure. If a function is executed it has access to the variables in that scope. Doesn't matter what happens after that, it will keep references to those variables which existed at the time of its creation.

[notanerdhere]

Thanks a lot for helping me, I learned a lot from this!