React setInterval in combination with useEffect creates behavior I don't understand. It requires a callback function inside setState setter function

Question

I am Following along in a course and I do not understand the logical reason for the different behavior in the two code examples. I start with the working example then I highlight what breaks the code. There are solutions for this problem in similar questions but I haven't found a description or term for what is happening.

Below the setInterval works correctly and the timer function counts down per second as it should. There is a secs useState hook to keep track of seconds, and an inProgress useState.

  React.useEffect(() => {
        if (!inProgress) {
            clearInterval(interval.current)
        } else {
            interval.current = setInterval(() => {
                setSecs((secs) => {
                    const timeLeft = secs - 1;
                    return timeLeft
                })
            }, 1000)
        }
        return () => clearInterval(interval.current);
  }, [inProgress])

Below is the code excerpt that varies and breaks the code.

      interval.current = setInterval(() => {
            setSecs(secs - 1)
            console.log('interval fires')
            console.log(secs)
        }, 1000)

This code does not work, it counts down for one second and then nothing happens. When using the console.logs as seen above, 'interval fires' prints every second as does 'secs', however the secs state is not counting down its stays the same number.

    React.useEffect(() => {
    if (!inProgress) {
        clearInterval(interval.current)
    } else {
        interval.current = setInterval(() => {
            setSecs(secs - 1)
        }, 1000)
    }
    return () => clearInterval(interval.current);
}, [inProgress])

This seems like important behavior to commit to memory, yet I don't know how to categorize it. I'm looking for terms that describe this behavior or a good visual explanation of it.

The last setSec state ran 1000ms ago, and even If I setInterval to 10 seconds the problem persists. So this is not a render, mount, update issue based in time. I don't believe this can be described by closures either. I currently cannot logically understand this behavior.

Does this help? https://stackoverflow.com/questions/62806541/how-to-solve-the-react-hook-closure-issue it is definitely a closure issue — Abe, May 16 '22 at 22:26
@Abe that link was helpful [article on stale closures](https://dmitripavlutin.com/react-hooks-stale-closures/) which is from the comments in the link you posted was the best resource I found. — JohnyClash, May 17 '22 at 18:58
As a summation the code that works, works because setSecs ( (x) => x -1 ) is called a functional update, x is Passed by setSecs and equals the previous state of secs. The problem is caused by a stale closure, which is I think best explained in this article. https://dmitripavlutin.com/react-hooks-stale-closures/ — JohnyClash, May 17 '22 at 20:23

Jae · Accepted Answer · 2022-05-17T11:56:52.917

This is because when you render your component, each render has its own props and states. So states and props are never be changed in the render.
In the useEffect with emtpy dependency array, you know that it will run on the first render of the component. It means that when you setInterval in this situation, you set it with the props and states which is dependent on the first render, and it will not be changed even if setInterval is fired.
In other words, your setInteval function will be the closure and the states will be the free variables. You are referencing this stale variable in the closure.

React.useEffect(() => {
    if (!inProgress) {
        clearInterval(interval.current)
    } else {
        interval.current = setInterval(() => {
            setSecs(secs - 1) // state 'secs' are dependent on this render, free variable in this closure 
        }, 1000)
    }
    return () => clearInterval(interval.current);
}, [inProgress])

So if you want it to be reference recent state, you can use functional update form in setState. offical docs

setSecs(secs => secs - 1) // this form of setState guarantee that your state value is the recent one

But if you need to do something more than setState with state value, you should consider using useRef. Unlike states, ref will always give you the same object reference which is independent of your component. offical docs
You can learn more details in Dan Abramov's post which is really helpful to understand the logic behind the useEffect and states.

Thanks @Jae. The term functional update as linked in your reply correctly describes the fix to the problem and the term for my problem is stale closure. I incorrectly thought the value passed in setstate((secs)=> secs-1) was referencing the secs state in the parent lexical environment but I was mistaken and secs is an attribute passed by setState method.... setState( (prevSec) => prevSec -1 — JohnyClash, May 17 '22 at 20:03

React setInterval in combination with useEffect creates behavior I don't understand. It requires a callback function inside setState setter function

1 Answers1