How to understand that components might do an extra re-rendering when arrow function callback is passed to lower components

Refering to the doc of handling-events

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <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.

I got confused
Could anyone provide a demo what shows the difference of the 3 patterns [bind/ public class fields syntax/ arrow function] in rendering

Beginne mit der im Issue verlinkten Dokumentation zu handling-events und prüfe den Abschnitt, der die Erstellung von Callbacks während des Renderings beschreibt. Füge ein klares Demo oder eine Erklärung hinzu, die constructor binding, public class fields und an untergeordnete Komponenten übergebene Arrow-Function-Callbacks vergleicht und zeigt, wann ein zusätzlicher Render-Vorgang auftritt. Erledigt ist die Aufgabe, wenn der Performance-Unterschied und das empfohlene Muster aus der Dokumentation verständlich hervorgehen.