Как избежать bind в JSX?

Question

[Radoncheg]

Я новичок. Интересно как избежать bind в коде react и сделать по другому, чтобы функция каждый раз заново не создавалась?

например вот такой код в рендере:

<i className="fa fa-trash-o icons" onClick={this.removeNote.bind(this, note.id)}/>

Answer 1

[Антон Спирин]

В вашем случае можно оставить как есть. Можно переделать так:

class Example extends React.Component {
  removeNote = () => {
  };

  render() {
    const { note } = this.props;

    return (
      <i className="fa fa-trash-o icons" onClick={() => this.removeNote(note.id)}/>
    );
  }
}

Можно пойти дальше:

class Example extends React.Component {
  removeNote = e => {
    const { id } = e.currentTarget.dataset;
  };

  render() {
    const { note } = this.props;

    return (
      <i className="fa fa-trash-o icons" data-id={note.id} onClick={this.removeNote} />
    );
  }
}

Вообще при необходимости передавать в хандлер дополнительные данные можно использовать и bind, и анонимные стрелочные функции, а оптимизацией стоит заниматься тогда, когда она необходима.