onClick concepts in docs

[nonopolarity]

In https://reactjs.org/docs/handling-events.html

It is said that

return (
      <button onClick={(e) => this.handleClick(e)}>

and then:

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering.

This is actually wrong concept.

(it may make the reader think, so "if the props passed to lower components don't change, then the lower components won't re-render"... in general that's not true. It is only true if the lower components are PureComponent or React.memo() or useMemo() optimized)

1. First, this itself is a problem, even if it is not passed down to to a lower component. Because when this is rendered to a virtual DOM tree, it is compared to the previous virtual DOM tree, and seeing it is a different click handler, it needs to update the actual DOM -- either by changing the onclick attribute or by removeEventListener() and addEventListener() to change the handler. Usually we don't want to update the actual DOM, as it is much more expensive than the virtual DOM.

2. Second, no matter it is passed down to lower components, the lower components will re-render anyway. UNLESS if the lower components are PureComponent or are optimized by React.memo(). But if they are just Component, the lower components are re-rendered anyway. So this conveys a wrong concept. It can cause actual DOM update in lower components, but this is covered in (1) already, and is true regardless of whether it is passed down the lower components.

3. One possibility is that changing the event listener is not as costly as other actual DOM operations, so the concern is if the click handler is passed down to lower components and the components use a PureComponent or React.memo to not re-render when the props didn't change, and passing in a new handler will cause the lower components to re-render. But this is the case only if lower components are not the regular Component. If the docs assumed that without mentioning it, it can cause mis-concepts.

So the actual problem is about needing to cause an update to the actual DOM.

And the word "re-render" above doesn't mean an update to actual DOM. "re-render" means making a virtual DOM tree, either by the render() of a class component, or by a function component returning React elements just like render(). (just to make sure we are talking about the same thing).