JS.REACT.NO.ARROW.FUNCTION.LIFECYCLE

Lifecycle methods should be methods on the prototype, not class fields

It is not neccessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns.

Rule Details

The following patterns are considered warnings:

Copy
class Hello extends React.Component {
  render = () => {
    return <div />;
  }
}

var AnotherHello = createReactClass({
  render: () => {
    return <div />;
  },
});

The following patterns are not considered warnings:

Copy
class Hello extends React.Component {
  render() {
    return <div />;
  }
}

var AnotherHello = createReactClass({
  render() {
    return <div />;
  },
});

When Not To Use It

If you don't care about performance of your application or conceptual correctness of class property placement, you can disable this rule.

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/