React Event Handling Guide

Votre page web entière se recharge-t-elle lorsque vous cliquez sur un bouton ? Votre champ de saisie ne parvient-il pas à mettre à jour l'état pendant que vous tapez ? Vous pourriez rencontrer ces problèmes si vous ne gérez pas correctement les événements dans React.

La gestion des événements consiste à capturer les actions de l'utilisateur, telles que les clics, les soumissions ou les changements, et à y répondre. React utilise un système appelé SyntheticEvent. Cela garantit que votre code fonctionne de la même manière sur tous les navigateurs comme Chrome, Safari et Firefox.

Différences clés entre les événements HTML et React :

  • Nommage : Utilisez le camelCase dans React. Utilisez onClick au lieu de onclick.
  • Gestionnaires : Passez une référence de fonction dans React. Utilisez des accolades au lieu de chaînes de caractères.
  • Prévention : Appelez toujours event.preventDefault() pour arrêter le comportement par défaut du navigateur.

Comment React gère les événements :

React n'attache pas d'écouteurs à chaque nœud individuel. Il utilise la délégation d'événements (Event Delegation). Il attache un seul écouteur à l'élément racine. Cela permet d'économiser de la mémoire et d'améliorer les performances.

Modèles courants à utiliser :

  • Compteur de clics : Utilisez une fonction pour mettre à jour l'état lorsqu'un utilisateur clique sur un bouton.
  • Gestion des formulaires : Utilisez event.target.name et event.target.value pour mettre à jour plusieurs champs de saisie avec une seule fonction. Utilisez toujours event.preventDefault() lors de la soumission d'un formulaire pour empêcher le rechargement de la page.
  • Passage d'arguments : Si vous devez passer un ID à une fonction, utilisez une fonction fléchée. Écrivez onClick={() => handleDelete(id)}. N'écrivez pas onClick={handleDelete(id)} car elle s'exécutera immédiatement pendant le rendu.

Évitez ces erreurs :

  • Boucles infinies : N'appelez jamais une fonction directement dans un attribut onClick. Cela déclenche une mise à jour de l'état pendant le rendu, ce qui provoque un autre rendu.
  • Événements indéfinis : Incluez toujours le paramètre event dans la définition de votre fonction si vous devez appeler preventDefault().
  • Fuites de mémoire : Si vous ajoutez des écouteurs manuels comme window.addEventListener dans un hook useEffect, retirez-les toujours dans la fonction de nettoyage.

Bonnes pratiques pour la performance :

  • Évitez de créer de nouvelles fonctions à l'intérieur d'une boucle .map() si votre liste est énorme.
  • Utilisez le hook useCallback lors du passage de gestionnaires à des composants enfants.
  • Nettoyez les écouteurs d'événements personnalisés pour que votre application reste rapide.

Maîtriser les événements est la clé pour construire des applications React interactives.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69