When we pass an arrow function to an event handler i.e. onClick={() => myFunction()}, we are causing un-necessary re-renders since this is a function definition.
Instead, should onClick={myFunction.bind(this)} be used instead of the arrow function whenever we call a function on an event handler and want access to this? Since it is only using a reference to the function, we are not causing a re-render each time.
Is the above understanding correct? If so, why would we ever use an arrow function as an event handler prop? It seems that ever since the introduction of ES6, using .bind like we do here is not usually recommended, but since it would not cause unnecessary re-renders shouldn't this be the best practice?
Since it is only using a reference to the function, we are not causing a re-render each time
You're wrong.
The bind method returns a new function (so will trigger a re-render).
To avoid re-renders, make use of the useCallback hook.
Or, since you don't appear to be making use of this inside myFunction (otherwise () => myFunction() would break it), just pass myFunction itself without creating a new function.
onClick={myFunction}