Enforcing event handlers as class fields with arrow functions

I’d like to enforce defining event handlers as class fields with arrow functions.

Good:

class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

Bad:

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

Also bad:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('clicked');
  }
  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

This is one of the workarounds mentioned in the React Handling events documentation:

If you are using the experimental public class fields syntax, you can use class fields to correctly bind callbacks

Please let me know if there are existing rules that cover this.

This rule is somewhat related to react/jsx-no-bind.

[ljharb]

@alexzherdev not exactly, because the “meat” of the function is still shared on the prototype, and thus optimized. The trivial bind-proxy can’t be avoided, but at least that way we’re minimizing the amount of un-shared code.

[ljharb]

Class fields should forever not be class fields. If you are tempted to do that, do this instead:

foo = this.foo.bind(this);
foo() {
  …
}