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

Bắt đầu với tài liệu handling-events được liên kết trong issue và xem lại phần mô tả việc tạo callback trong quá trình rendering. Thêm một bản demo hoặc phần giải thích rõ ràng so sánh constructor binding, public class fields và các callback arrow function được truyền cho các component cấp thấp hơn, đồng thời cho thấy khi nào một lần render bổ sung xảy ra. Công việc được hoàn thành khi có thể hiểu được sự khác biệt về hiệu năng và pattern được khuyến nghị từ tài liệu.