Por que usar Arrow Functions ou Bind em JSX Props é proibido

Ao usar React, é importante evitar usar arrow function ou ligação em adereços JSX. Essa prática pode levar a problemas de desempenho e comportamento incorreto.

Problemas de desempenho

O uso de funções de seta ou vinculação em adereços JSX força essas funções a serem recriadas em cada renderização. Isso significa que:

• A função antiga é descartada, acionando a coleta de lixo.
• A renderização contínua de muitos elementos pode resultar em instabilidades no desempenho.
• Componentes que dependem de PureComponents ou ShouldComponentUpdate ainda aciona novas renderizações devido à alteração da função de função de seta.

Comportamento incorreto

Considere o seguinte exemplo:

onClick={() => this.handleDelete(tile)}

Este código criará uma nova função em cada renderização, fazendo com que o React marque o componente como sujo e acione uma nova renderização. Mesmo que o suporte do bloco não tenha mudado, o componente será renderizado novamente porque a função da seta é diferente.

Práticas recomendadas

Para evitar essas armadilhas, use o seguindo as práticas recomendadas:

• Vincule o manipulador de eventos no construtor:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Crie uma função de seta fora do método de renderização:

const handleDelete = tile => {
  // Handle delete logic
};

Nota adicional:

É importante observar que as funções de seta funcionam perfeitamente quando usadas em outras partes do componente, como no método de renderização. No entanto, eles devem ser evitados ao atribuir manipuladores de eventos a adereços JSX.