Evite funções de seta e vinculação em acessórios JSX para desempenho ideal

A ferramenta lint do React visa aprimorar as práticas de código, destacando possíveis problemas. Uma mensagem de erro comum é “Os adereços JSX não devem usar funções de seta”. Isso aponta os efeitos prejudiciais do uso de funções de seta ou vinculação em adereços JSX. implicações de desempenho:

Coleta de lixo:

Cada vez que uma função de seta é criada, a anterior é descartada. Se vários elementos forem renderizados com funções embutidas, isso pode levar a animações instáveis.

Rerenderização:
• As funções de seta embutidas interferem nos mecanismos de comparação superficiais usados ​​por PureComponents e componentes que empregam o método shouldComponentUpdate. Como o suporte da função de seta é recriado a cada vez, ele é detectado como uma alteração de suporte, acionando uma nova renderização desnecessária. estes exemplos:
Exemplo 1: PureComponent sem Inline Manipulador
• class Button estende React.PureComponent { renderizar() { const {onClick} = this.props; console.log('botão de renderização'); return Clique; } }

Neste código, o componente Button somente é renderizado novamente quando seus adereços mudam, conforme esperado para um PureComponent.

Exemplo 2: PureComponent com Inline Handler

const Button = (adereços) => { console.log('botão de renderização'); return props.onClick()}>Clique; };

Devido à função de seta embutida, Button agora é renderizado novamente todas as vezes, mesmo que o estado do componente permaneça inalterado. Essa nova renderização desnecessária pode afetar significativamente o desempenho.

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

Para evitar esses problemas de desempenho, é recomendável seguir as seguintes práticas recomendadas:

Defina seus manipuladores de eventos fora do JSX:

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

Use esta ligação:

Para componentes de classe, vincule manipuladores de eventos a isso no construtor.

Utilize funções de ordem superior:

Considere usando funções de ordem superior, como map ou bindActionCreators, para manipulação de eventos mais eficiente em JSX.