Comparison
ClosurevsStale closure
Closure
the callback still had the variable from the function that created it, long after that function returned.
A function together with the scope it was defined in, which it keeps alive for as long as the function is reachable. It is the mechanism behind every callback that remembers something, and behind private state without classes. It is also a memory hazard: a closure over a large object or a DOM node keeps that object alive, which is one of the most common shapes of a leak in a long-lived page.
Full entry →Stale closure
the interval you set up on mount kept logging the count as zero no matter how many times you clicked.
A callback created in an earlier render still holding that render's variables while newer ones exist. It is the defining bug of hook-based components: an effect or subscription registered once captures the first render's state and never sees an update. The fixes are a dependency array that actually lists what the callback reads, a ref for values that must be current, or a state updater function instead of reading the value at all.
Full entry →