I was studying ways of binding Event handler in React Js.
I tried writing an Arrow funtion as an Event Handler.
Surprisingly, when the Event is fired, the Handler keeps executing Infinite times.

Can anyone please explain this behavior of REACT JS? Why its executing infinite times??

import * as React from “react”;
import { Component } from “react”;

class EventBinding2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hii",
    };
  }

  clickHandler = (event) => {
    this.setState(() => {
      return {
        message: "Bye",
      };
    });
    console.log("Button Clicked..");
    console.log("this: ", this);
  };

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>{this.state.message}</button>
      </div>
    );
  }
}

export default EventBinding2;

I expected to fire the event and execute handler only once.