Comparison
Dependency arrayvsStale closure
Dependency array
you left a value out of the array to stop the loop and the effect started using an old copy of it.
The list telling the framework which values an effect or memo depends on, compared by reference between renders. Omitting a dependency to suppress a re-run produces a stale closure; including an object or function recreated each render produces an infinite loop. Both symptoms come from the same cause, which is why the lint rule is worth obeying and the fix is usually to stabilise the value rather than to hide it.
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 →