The Frozen Echo: why your React setInterval keeps logging 0

The timer that froze

function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
console.log(count); // 0, 0, 0...
setCount(count + 1); // 0 + 1, forever
}, 1000);
return () => clearInterval(id);
}, []);
}

KaiThere is only one count. I add one to it every second. What could go wrong?

1. Render 1: React calls Timer. This call has its own count, and it is 0. The effect runs and starts the interval. The arrow function passed to setInterval closes over that count.
2. Tick 1: the callback reads count (0), logs it, and calls setCount(0 + 1).
3. Render 2: React calls Timer again. This new call has a new count, and it is 1. The dependency array is empty, so the effect does not run again and the interval is not replaced.
4. Tick 2 and every tick after: the same old callback still sees render 1's count, so it calls setCount(0 + 1) again. The state is already 1, React has nothing new to show, and the screen stays at 1.

RaidenThere is no single count, Kai. There is one for every render, each frozen at its own moment. Your interval was born in render one, so render one's count is the only one it will ever hear.

Why it happens: each render is a snapshot

• Listeners added once. A handler attached in an effect with [] reads state from the render that attached it.
• Timeouts. A setTimeout started before an update still sees the value from before.
• Saved callbacks. Socket handlers, debounced functions and anything else stored for later can hold an old render.

KaiSo anything that runs later might be talking to the past.

The fix: ask for the latest

useEffect(() => {
const id = setInterval(() => {
setCount((c) => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);

When you need to read the value

// a ref that always holds the latest count
const countRef = useRef(count);
useEffect(() => {
countRef.current = count;
});
useEffect(() => {
const id = setInterval(() => {
console.log(countRef.current); // latest value
}, 1000);
return () => clearInterval(id);
}, []);

const onTick = useEffectEvent(() => {
console.log(count); // latest committed value
});
useEffect(() => {
const id = setInterval(() => onTick(), 1000);
return () => clearInterval(id);
}, []);

Catch the Echo in DevTools

// paused inside the interval callback: count
// 0 (the closure from render 1)
// React DevTools, Timer, hooks:
// State: 1

KaiOne, two, three, four. It's counting! The echo melted.

Before you merge a callback

• Does a function run later (interval, timeout, listener, socket handler, debounced call) and read props or state?
• If it only updates state from the old value, does it use an updater like setCount(c => c + 1)?
• If it needs to read the latest value, is that value in the dependencies, a ref, or an Effect Event?
• Is react-hooks/exhaustive-deps on, with no disabled warnings hiding a missing dependency?

Acharya's Rule #8

A closure remembers the render it was born in. Update from the previous value.