Q: should we use useCallback on native HTML elements

Do you want to request a feature or report a bug?

It’s a question.

What is the current behavior?

According to the docs, this could be useful optimizing callback functions being passed down:

This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

My question is: should we use useCallback when passing a callback to a native HTML element? e.g. <button onClick={callback}></button>

[markerikson]

Doesn’t really specifically relate, but yes, that’s part of what’s going on here. React has its one single event listener at the root of the component tree, and is (I assume) just storing something like eventListeners[elementKey].onClick = element.props.onClick (totally fake code).

[markerikson]

No, there’s no benefit for that.

The point of useCallback is to create a consistent reference for a callback function. This primarily matters if you are passing it to a child component that is attempting to optimize re-renders based on whether its props have changed by reference (ie, PureComponent and React.memo()).

A plain HTML element does not care if you are passing in a different click handler reference each time, so there’s no benefit in this situation.