Por que os objects JSX não devem usar funções de seta ou ligar?

Estou executando o lint com meu aplicativo React e recebo este erro:

error JSX props should not use arrow functions react/jsx-no-bind 

E é aqui que estou executando a function de seta (dentro do onClick ):

 {this.state.photos.map(tile => (   this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={by {tile.author}} actionIcon={ this.handleDelete(tile)}>} >  this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>   ))} 

Esta é uma prática ruim que deve ser evitada? E qual é a melhor maneira de fazer isso?

Por que você não deve usar funções de seta inline em adereços JSX

Usar funções de seta ou binding no JSX é uma prática ruim que prejudica o desempenho, porque a function é recriada em cada renderização.

  1. Sempre que uma function é criada, a function anterior é coletada como lixo. Rerender muitos elementos pode criar jank em animações.

  2. Usar uma function de seta inline fará com que o PureComponent e os componentes que usam o método shouldComponentUpdate método shouldComponentUpdate de qualquer maneira. Como a function de seta prop é recriada a cada vez, a comparação superficial irá identificá-la como uma alteração em um prop, e o componente será renderizado novamente.

Como você pode ver nos 2 exemplos a seguir – quando usamos a function de seta inline, o componente é renderizado toda vez (o console mostra o texto ‘render button’).

Exemplo 1 – PureComponent sem manipulador in-line

 class Button extends React.PureComponent { render() { const { onClick } = this.props; console.log('render button'); return (  ); } } class Parent extends React.Component { state = { counter: 0 } onClick = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); render() { const { counter } = this.state; return ( 
{ counter }
); } } ReactDOM.render( , document.getElementById('root') );
   

Isso ocorre porque uma function de seta aparentemente criará uma nova instância da function em cada renderização, se usada em uma propriedade JSX. Isso pode criar uma enorme pressão sobre o coletor de lixo e também impedir o navegador de otimizar qualquer “caminho quente”, já que as funções serão descartadas em vez de reutilizadas.

Você pode ver toda a explicação e mais algumas informações em https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Para evitar a criação de novas funções com os mesmos argumentos, você pode memorizar o resultado da binding de function, aqui está um utilitário simples chamado memobind para fazer isso: https://github.com/supnate/memobind