M

MLOG

Français

Découvrez le hook React useEvent, un outil puissant pour créer des références de gestionnaires d'événements stables dans les applications React dynamiques, améliorant les performances et évitant les rendus inutiles.

React useEvent : Obtenir des références stables pour les gestionnaires d'événements

Les développeurs React rencontrent souvent des défis lorsqu'ils gèrent les gestionnaires d'événements, en particulier dans des scénarios impliquant des composants dynamiques et des fermetures (closures). Le hook useEvent, un ajout relativement récent à l'écosystème React, offre une solution élégante à ces problèmes, permettant aux développeurs de créer des références de gestionnaires d'événements stables qui ne déclenchent pas de rendus inutiles.

Comprendre le problème : l'instabilité des gestionnaires d'événements

Dans React, les composants effectuent un nouveau rendu lorsque leurs props ou leur état changent. Lorsqu'une fonction de gestion d'événement est passée en tant que prop, une nouvelle instance de la fonction est souvent créée à chaque rendu du composant parent. Cette nouvelle instance de fonction, même si elle a la même logique, est considérée comme différente par React, ce qui entraîne un nouveau rendu du composant enfant qui la reçoit.

Considérez cet exemple simple :


import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  };

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

Dans cet exemple, handleClick est recréée à chaque rendu de ParentComponent. Même si le ChildComponent est optimisé (par exemple, en utilisant React.memo), il effectuera quand même un nouveau rendu car la prop onClick a changé. Cela peut entraîner des problèmes de performance, en particulier dans les applications complexes.

Présentation de useEvent : la solution

Le hook useEvent résout ce problème en fournissant une référence stable à la fonction du gestionnaire d'événement. Il découple efficacement le gestionnaire d'événement du cycle de rendu de son composant parent.

Bien que useEvent ne soit pas un hook React intégré (en date de React 18), il peut être facilement implémenté comme un hook personnalisé ou, dans certains frameworks et bibliothèques, est fourni dans leur ensemble d'utilitaires. Voici une implémentation courante :


import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect est crucial ici pour les mises à jour synchrones
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Le tableau de dépendances est intentionnellement vide, garantissant la stabilité
  ) as T;
}

export default useEvent;

Explication :

Utiliser useEvent en pratique

Maintenant, réécrivons l'exemple précédent en utilisant useEvent :


import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect est crucial ici pour les mises à jour synchrones
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Le tableau de dépendances est intentionnellement vide, garantissant la stabilité
  ) as T;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    console.log('Clicked from Parent:', count);
    setCount(count + 1);
  });

  return (
    

      
      
Count: {count}

    

  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent rendered');
  return ;
}

export default ParentComponent;

En enveloppant handleClick avec useEvent, nous nous assurons que le ChildComponent reçoit la même référence de fonction à travers les rendus de ParentComponent, même lorsque l'état count change. Cela évite les rendus inutiles de ChildComponent.

Avantages de l'utilisation de useEvent

Cas d'utilisation pour useEvent

Alternatives et considérations

Bien que useEvent soit un outil puissant, il existe des approches alternatives et des considérations à garder à l'esprit :

Considérations sur l'internationalisation et l'accessibilité

Lors du développement d'applications React pour un public mondial, il est crucial de prendre en compte l'internationalisation (i18n) et l'accessibilité (a11y). useEvent lui-même n'a pas d'impact direct sur l'i18n ou l'a11y, mais il peut indirectement améliorer les performances des composants qui gèrent du contenu localisé ou des fonctionnalités d'accessibilité.

Par exemple, si un composant affiche du texte localisé ou utilise des attributs ARIA basés sur la langue actuelle, s'assurer que les gestionnaires d'événements au sein de ce composant sont stables peut éviter des rendus inutiles lorsque la langue change.

Exemple : useEvent avec la localisation


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect est crucial ici pour les mises à jour synchrones
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Le tableau de dépendances est intentionnellement vide, garantissant la stabilité
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Button clicked in', language);
    // Effectuer une action en fonction de la langue
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //Simuler le changement de langue
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      

        
        
      

    
  );
}

export default App;

Dans cet exemple, le composant LocalizedButton affiche du texte en fonction de la langue actuelle. En utilisant useEvent pour le gestionnaire handleClick, nous nous assurons que le bouton n'effectue pas de rendu inutile lorsque la langue change, améliorant ainsi les performances et l'expérience utilisateur.

Conclusion

Le hook useEvent est un outil précieux pour les développeurs React cherchant à optimiser les performances et à simplifier la logique des composants. En fournissant des références de gestionnaires d'événements stables, il évite les rendus inutiles, améliore la lisibilité du code et augmente l'efficacité globale des applications React. Bien qu'il ne s'agisse pas d'un hook React intégré, son implémentation simple et ses avantages significatifs en font un ajout pertinent à la boîte à outils de tout développeur React.

En comprenant les principes qui sous-tendent useEvent et ses cas d'utilisation, les développeurs peuvent créer des applications React plus performantes, maintenables et évolutives pour un public mondial. N'oubliez pas de toujours mesurer les performances et de prendre en compte les besoins spécifiques de votre application avant d'appliquer des techniques d'optimisation.