React hooks: accessing up-to-date state from within a callback

Question

EDIT (22 June 2020): as this question has some renewed interest, I realise there may be a few points of confusion. So I would like to highlight: the example in the question

Answer 1

onClick={() => { clickHandler(); }}

This way you run the function as defined when you click it not when you declared the onClick handler.

React re-runs the hook function every time there is a change, and when it does so it re-defines your clickHandler() function.

For the record, you could clean that up. Since you don't care what your arrow function returns you could write it as such.

onClick={e => clickHandler()}