Les Hooks et le Contexte de React ont transformé l'approche de la gestion d'état et du partage de données dans les applications React. Avec l'introduction des hooks dans la version 16.8 en 2019, les développeurs ont obtenu la possibilité d'utiliser l'état et les méthodes du cycle de vie au sein des composants fonctionnels, ce qui a permis un code plus concis et lisible.

Le Contexte, quant à lui, offre un moyen simplifié de partager des données entre les composants sans avoir recours au prop drilling. Cette section explore la synergie puissante entre les hooks React et le Contexte, mettant en avant leur potentiel combiné pour simplifier la gestion d'états complexes et faciliter la circulation fluide des données à travers l'arborescence des composants.

Dans les prochains chapitres, nous examinerons en détail les éléments suivants :

Hook d’état

useState permet à un composant de conserver et de rappeler des informations (par exemple, une saisie utilisateur). Par exemple, un composant de formulaire peut utiliser l’état pour préserver la valeur saisie, tandis qu’une galerie d’images peut s’appuyer sur l’état pour suivre l’index de l’image sélectionnée.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Hook de référence

useRef fournit un moyen pour un composant de conserver des informations qui ne déclenchent pas de rendu, telles qu’un nœud DOM ou un identifiant de délai d’attente. Contrairement à l’état, la modification d’une référence n’entraîne pas de re-rendu du composant. Les références servent de « porte de sortie » du paradigme React classique et sont utiles lors de l’interaction avec des systèmes non-React, comme les API natives du navigateur.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Hook d'effet

useEffect permet à un composant d'établir des connexions et de se synchroniser avec des systèmes externes, y compris l'interaction avec les réseaux, la manipulation du DOM du navigateur, la gestion des animations, l'intégration de widgets développés avec différentes bibliothèques d'interface utilisateur, et l'incorporation transparente de code non-React.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Hook de mémoïsation

useMemo améliore les performances de rendu en minimisant les calculs inutiles. Par exemple, il est possible d'indiquer à React de réutiliser un calcul mis en cache ou d'éviter un nouveau rendu si les données n'ont pas changé depuis le rendu précédent.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Hook de contexte

useContext permet à un composant d'accéder à des informations provenant de parents éloignés sans passer par les props. Il permet au composant de plus haut niveau de l'application de transmettre facilement le thème d'interface utilisateur actuel à tous les composants descendants, quel que soit leur niveau dans l'arborescence des composants.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}