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

Issue でリンクされている handling-events ドキュメントから始め、rendering 中の callback の作成について説明しているセクションを確認してください。constructor binding、public class fields、下位コンポーネントに渡す arrow-function callback を比較し、追加の render が発生するタイミングを示す、明確なデモまたは説明を追加してください。ドキュメントからパフォーマンスの違いと推奨されるパターンを理解できれば完了です。