News for hackers. Stuff that matters.

A comment on Not using useCallback is premature optimization. Parent comment

Re:Not using useCallback is premature optimization by Rodeoclash on Wednesday August 17, 2022 @07:47PM (#32503347)
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.

[ Parent | on HN ]
Re:Not using useCallback is premature optimization by zastrowm on Wednesday August 17, 2022 @09:01PM (#32503904)
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.
[ Parent | on HN ]
Re:Not using useCallback is premature optimization by tylerhou on Wednesday August 17, 2022 @10:05PM (#32504346)
Would the dependency linter catch this? I assume yes?
[ Parent | on HN ]
Re:Not using useCallback is premature optimization by tpict on Wednesday August 17, 2022 @11:33PM (#32504959)
Yep, it will flag any references to variables in the outer scope that it doesn’t know for certain are stable.
[ Parent | on HN ]
Re:Not using useCallback is premature optimization by Rodeoclash on Wednesday August 17, 2022 @11:05PM (#32504771)
Ahh, that's interesting.
[ Parent | on HN ]