jsx-arrow-anti-pattern.js

// Good

const Calendar = (props) => (
  <div className="calendar" onClick={ props.handleClick }>
    { props.title }
  </div>  
);

// Good

const Calendar = React.createClass({
  
  handleClick() {
    // ...
  },
  
  render() {
    return (
      <div className="calendar" onClick={ this.handleClick }>
        { this.props.title }
      </div>  
    );
  }
});

// Also good

const myFn = () => {
  // arrow fn block
}

const Calendar = (props) => (
  <div className="calendar" onClick={ myFn }>
    { props.title }
  </div>  
);

// Bad

const Calendar = React.createClass({
  render() {
    // every time when render is called we're giving
    // brand new functions as both onClick and onKeyUp props.
    // if render is called 1000 times in a second, it's 2000 
    // new functions in the memory.
    
    // It also enforces the child div to be re-rendered because 
    // its previous props are not equal with the new props (in case of huge jsx structures, 
    // it could cause expensive equality calculations (unnecessary CPU usage)).
    return (
      <div 
        className="calendar" 
        onKeyUp={ function myOnKeyUp() {
          // ... good ol` function statement
        } } 
        onClick={ () => {
          // ... arrow fn block
        } }
      >
        { this.props.title }
      </div>
    );
  }
});