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

Commencez par la documentation handling-events liée dans l’issue et consultez la section qui décrit la création de callbacks lors du rendu. Ajoutez une démonstration ou une explication claire comparant le constructor binding, les public class fields et les callbacks de fonctions fléchées passés à des composants enfants, en montrant dans quels cas un rendu supplémentaire se produit. La tâche sera terminée lorsque la différence de performances et le modèle recommandé seront compréhensibles à partir de la documentation.