Évitez les fonctions fléchées et les liaisons dans les accessoires JSX pour des performances optimales

L'outil lint de React vise à améliorer les pratiques de code en mettant en évidence les problèmes potentiels. Un message d'erreur courant est "Les accessoires JSX ne doivent pas utiliser de fonctions fléchées". Cela souligne les effets néfastes de l'utilisation de fonctions fléchées ou de liaisons dans les accessoires JSX.

Pourquoi les fonctions fléchées et les liaisons entravent les performances

L'intégration de fonctions fléchées ou de liaisons dans les accessoires JSX a implications sur les performances :

• Garbage Collection : Chaque fois qu'une fonction de flèche est créée, la précédente est supprimée. Si plusieurs éléments sont rendus avec des fonctions en ligne, cela peut conduire à des animations saccadées.
• Rendu : Les fonctions de flèche en ligne interfèrent avec les mécanismes de comparaison superficiels utilisés par PureComponents et les composants employant la méthode ShouldComponentUpdate. Comme l'accessoire de fonction de flèche est recréé à chaque fois, il est détecté comme un changement d'accessoire, déclenchant un rendu inutile.

Impact des gestionnaires en ligne sur le rerendu

Considérez ces exemples :

Exemple 1 : PureComponent sans Inline Handler

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

Dans ce code, le composant Button n'est restitué que lorsque ses accessoires changent, comme prévu pour un PureComponent.

Exemple 2 : PureComponent avec gestionnaire en ligne

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

En raison de la fonction de flèche en ligne, Button s'affiche désormais à nouveau à chaque fois, même si l'état du composant reste inchangé. Ce rendu inutile peut avoir un impact significatif sur les performances.

Bonnes pratiques

Pour éviter ces problèmes de performances, il est recommandé de respecter les bonnes pratiques suivantes :

• Définissez vos gestionnaires d'événements en dehors de JSX : Extrayez les fonctions fléchées ou liez les méthodes dans des déclarations de variables distinctes.
• Utilisez cette liaison : Pour les composants de classe, liez les gestionnaires d'événements à ceci dans le constructeur.
• Utilisez des fonctions d'ordre supérieur : Envisagez d'utiliser des fonctions d'ordre supérieur comme map ou bindActionCreators pour plus d'efficacité gestion des événements dans JSX.