À quoi sert un tableau de dépendances dans React?

Le tableau de dépendances (dependency array) dans les hooks React (par exemple, useEffect, useMemo, useCallback) indique de quelles valeurs dépend l'exécution de l'effet ou de la fonction mémorisée.

Son utilisation permet de :

1. Optimiser les performances : React relance l'effet ou recalcule la valeur uniquement lorsque l'une des valeurs du tableau de dépendances a changé depuis le dernier rendu. Cela évite des calculs et des mises à jour inutiles.
2. Éviter les cycles infinis : Sans tableau de dépendances ou avec des dépendances mal spécifiées, l'effet peut s'exécuter à chaque rendu, provoquant une mise à jour d'état qui entraîne un nouveau rendu, créant ainsi une boucle infinie. Spécifier les dépendances garantit que l'effet ne s'exécute que lorsque c'est vraiment nécessaire.
3. Contrôler le cycle de vie de l'effet :
   • Un tableau vide [] signifie que l'effet ne sera lancé qu'une seule fois après le premier rendu (similaire à componentDidMount). Il ne sera pas relancé lors des rendus suivants, même si l'état ou les props du composant changent.
   • L'absence de tableau de dépendances (ou undefined) signifie que l'effet sera lancé à chaque rendu du composant.

Exemple avec useEffect :

// L'effet ne s'exécute qu'une seule fois après le premier rendu
useEffect(() => {
  console.log('Composant monté');
}, []);

// L'effet s'exécute lors du premier rendu et lorsque la valeur de count change
useEffect(() => {
  console.log('La valeur de count a changé:', count);
}, [count]);

// L'effet s'exécute à chaque rendu
useEffect(() => {
  console.log('Rendu effectué');
});

Exemple avec useMemo :

// La valeur expensiveResult est recalculée uniquement lorsque a ou b changent
const expensiveResult = useMemo(() => {
  console.log('Recalcul en cours...');
  return a * b;
}, [a, b]);

Exemple avec useCallback :

// La fonction handleClick est recréée uniquement lorsque id change
const handleClick = useCallback(() => {
  console.log('Clic sur l’élément avec id:', id);
}, [id]);

Une dépendance correctement spécifiée est essentielle pour le bon fonctionnement des hooks et la performance des applications React.