Skip to content

Instantly share code, notes, and snippets.

@getify getify/1.js

Last active Mar 28, 2020
Embed
What would you like to do?
illustrating the hook/stale-closure problem
function SomeCounter() {
const [ counter, updateCounter ] = useState(0);
useEffect(function listening(){
const btn = document.getElementById("increment-counter-btn");
btn.addEventListener("click",onClick);
},[]);
useEffect(function logger(){
// this logger() is updated each time `counter` changes, so
// the closure is never stale
console.log(`Current counter: ${ counter }`);
},[ counter ]);
return <div>Counter Value: {counter}</div>;
function onClick(evt) {
// we're closed over `counter` here, but only the onClick()
// from the very first rendering is bound as the event
// handler; the closure becomes stale -- OOPS!
console.log(`Previous Counter: ${counter}`);
updateCounter(c => c + 1);
}
}
@getify

This comment has been minimized.

Copy link
Owner Author

getify commented Mar 27, 2020

FTR, I'm well aware of myriad ways to "fix" this problem. I'm also well aware of linter rules that purportedly save you from making this mistake. Neither of those is relevant to my point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.