Methods

• Use arrow functions to close over local variables.

  function ItemList(props) {
    return (
      <ul>
        {props.items.map((item, index) => (
          <Item
            key={item.key}
            onClick={() => doSomethingWith(item.name, index)}
          />
        ))}
      </ul>
    );
  }

• Bind event handlers for the render method in the constructor. eslint: react/jsx-no-bind

  Why? A bind call in the render path creates a brand new function on every single render.

  // bad
  class extends React.Component {
    onClickDiv() {
      // do stuff
    }
    render() {
      return <div onClick={this.onClickDiv.bind(this)} />;
    }
  }
  // good
  class extends React.Component {
    constructor(props) {
      super(props);
      this.onClickDiv = this.onClickDiv.bind(this);
    }
    onClickDiv() {
      // do stuff
    }
    render() {
      return <div onClick={this.onClickDiv} />;
    }
  }

• Do not use underscore prefix for internal methods of a React component.

  Why? Underscore prefixes are sometimes used as a convention in other languages to denote privacy. But, unlike those languages, there is no native support for privacy in JavaScript, everything is public. Regardless of your intentions, adding underscore prefixes to your properties does not actually make them private, and any property (underscore-prefixed or not) should be treated as being public. See issues #1024, and #490 for a more in-depth discussion.

  // bad
  React.createClass({
    _onClickSubmit() {
      // do stuff
    },
    // other stuff
  });
  // good
  class extends React.Component {
    onClickSubmit() {
      // do stuff
    }
    // other stuff
  }

• Be sure to return a value in your render methods. eslint: react/require-render-return

  // bad
  render() {
    (<div />);
  }
  // good
  render() {
    return (<div />);
  }