Écouteurs d'événements et hooks React

Problème : Lors de l'utilisation de hooks React et d'écouteurs d'événements, le journal de la console d'état affiche des informations incorrectes.

Description du problème

Considérez le CodeSandbox fourni : https://codesandbox.io/s/lrxw1wr97m. Lorsque vous cliquez deux fois sur le bouton « Ajouter une carte », puis cliquez sur « Bouton1 » dans la première carte, la console affiche correctement l'état avec deux cartes. Cependant, si vous cliquez sur « Bouton2 » dans la même carte (qui est gérée par un écouteur d'événement), la console n'affiche de manière incorrecte qu'une seule carte dans l'état.

Raison de l'état incorrect

Le Le problème provient du traitement différent des gestionnaires d'événements dans les composants CardsProvider et Card. Les gestionnaires d'événements définis dans le composant fonctionnel CardsProvider, handleCardClick et handleButtonClick, sont redéfinis à chaque fois que le composant est rendu. Cela signifie qu'ils font référence à l'état au moment où ils sont définis, qui peut être obsolète lorsque l'écouteur d'événement est déclenché.

D'autre part, le composant Card utilise useRef pour enregistrer l'écouteur d'événement, qui persiste tout au long du cycle de vie du composant. Par conséquent, la fonction d'écoute d'événements fait référence à l'état au moment où le composant a été monté, qui est obsolète.

Solution - Utilisation de la fonction de mise à jour d'état

Une solution consiste à utiliser un programme de mise à jour d'état. fonction qui reçoit un nouvel état comme argument, plutôt que de s'appuyer sur l'état obsolète de la portée englobante :

const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState   1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);

Dans ce scénario, l'écouteur d'événements reçoit le nouvel état, éliminant ainsi le problème des données obsolètes. Cependant, il est important de noter que la fonction de mise à jour d'état peut renvoyer le même état pour éviter les mises à jour inutiles. Utilisez console.log dans la fonction de mise à jour de l'état pour observer les changements d'état.

Autres solutions

Les autres moyens de résoudre ce problème incluent :

• Mutable État : Utilisation de useRef au lieu de useState.
• Réenregistrement manuel de l'écouteur d'événements : Réenregistrement de l'écouteur d'événements à chaque fois que l'état change.
• Gestion des événements intégrée : Utilisation de la gestion des événements intégrée de React plutôt que des écouteurs d'événements personnalisés.