undefined | Better HN

0 pointsRodeoclash3y ago0 comments

This is the exact footgun I ran into yesterday:

https://codepen.io/rodeoclash/pen/poLqeYb?editors=1111

Even though `theState` is passed to the dependency array of the parent component which is tracking hidden images, it will still be stale!

After a while, I figured out that the child components, where the click originates from, also needed to have the map of deleted images passed to their dependency array. Total footgun.

0 comments

zastrowm3y ago

For this specific example the problem is that the handleClick callback is using a stale/cached onImageDeleted callback (which indirectly has old state). If you add onImageDeleted to the handleClick dependency array, it beings to work as you expect.

tylerhou3y ago

Would the dependency linter catch this? I assume yes?

tpict3y ago

Yep, it will flag any references to variables in the outer scope that it doesn’t know for certain are stable.

RodeoclashOP3y ago

Ahh, that's interesting.

j / k navigate · click thread line to collapse