Comment fonctionne le tableau de dépendances de useEffect, et qu'est-ce qui a tendance à mal tourner avec lui ?

React compare chaque dépendance à sa valeur du rendu précédent avec Object.is et ne relance l'effet que si l'une d'elles a changé. Un tableau vide veut dire une exécution unique après le montage ; omettre le tableau veut dire une exécution après chaque rendu. Ça part de travers quand vous oubliez une dépendance et capturez une valeur périmée, ou quand vous incluez un objet ou une fonction recréés à chaque rendu, ce qui fait boucler l'effet indéfiniment.

React garde le tableau du dernier rendu et compare chaque élément avec Object.is. Si tout correspond, il saute l'effet ; si quelque chose diffère, il exécute le nettoyage de l'ancien puis lance le nouveau. Le piège, c'est que l'effet capture les props et l'état du rendu qui l'a créé, donc si j'en oublie un dans le tableau, j'obtiens une valeur périmée qui se démode en silence. L'autre versant, c'est d'y mettre un objet ou une fonction fléchée, parce que ce sont des références neuves à chaque rendu, donc l'effet tourne en boucle. Mes correctifs habituels : des mises à jour d'état fonctionnelles pour ne pas avoir besoin de la valeur courante en dépendance, sortir les constantes du composant, et n'envelopper un callback que quand il doit vraiment être une dépendance. Honnêtement, la première question que je me pose, c'est si l'effet devrait exister. La plupart des effets que j'ai supprimés calculaient de l'état dérivé, ce qui est juste un calcul pendant le rendu, ou récupéraient des données qui avaient leur place dans le routeur ou dans une bibliothèque de requêtes.