How extra re-rendering happens in React when passing an arrow function via props as a callback method?

In this React document (https://reactjs.org/docs/handling-events.html) it says,

" .....

<button onClick={() => this.handleClick()}>
        Click me
</button>

.....

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. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem."

about using arrow functions as callback props. Can someone please explain how does an extra re-rendering happen in this case? Just need to know the mechanism of it..