Pourquoi utiliser les fonctions fléchées ou la liaison dans les accessoires JSX est un non-non

Lors de l'utilisation de React, il est important d'éviter d'utiliser les fonctions fléchées ou liaison dans les accessoires JSX. Cette pratique peut entraîner des problèmes de performances et un comportement incorrect.

Mauvais performances

L'utilisation de fonctions fléchées ou de liaisons dans les accessoires JSX force la recréation de ces fonctions à chaque rendu. Cela signifie que :

• L'ancienne fonction est supprimée, déclenchant le garbage collection.
• Le rendu continu de nombreux éléments peut entraîner une instabilité des performances.
• Les composants s'appuyant sur PureComponents ou ShouldComponentUpdate déclenche toujours des rendus en raison de la modification de la fonction de flèche.

Incorrect Comportement

Considérez l'exemple suivant :

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

Ce code créera une nouvelle fonction sur chaque rendu, ce qui oblige React à marquer le composant comme sale et à déclencher un nouveau rendu. Même si l'accessoire de tuile n'a pas changé, le composant sera restitué car la fonction de la flèche est différente.

Bonnes pratiques

Pour éviter ces pièges, utilisez l'option bonnes pratiques suivantes :

• Lier le gestionnaire d'événements dans le constructeur :

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

• Créez une fonction de flèche en dehors de la méthode de rendu :

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

Remarque supplémentaire :

Il est important de noter que les fonctions fléchées conviennent parfaitement lorsqu'elles sont utilisées dans d'autres parties du composant, comme dans la méthode de rendu. Cependant, ils doivent être évités lors de l'attribution de gestionnaires d'événements aux accessoires JSX.