Problème → Solution ~1 min de lecture
Ignorer les réponses obsolètes dans un effet React
Votre recherche React affiche « ge » alors que le champ contient déjà « genève » ? Vérifiez l’ordre d’arrivée des réponses.
Une recherche React peut afficher les résultats d’une ancienne saisie sans que le cache soit en cause. Les requêtes ne terminent pas nécessairement dans leur ordre de départ : celle pour « genève » peut finir avant celle pour « ge ». Si chaque réponse appelle setResults, la réponse tardive écrase les résultats actuels.
Pour vérifier cette hypothèse, comparez les termes recherchés et l’ordre de fin des requêtes dans l’onglet Network. L’ordre de départ seul ne permet pas de repérer le problème.
Dans l’effet qui dépend du terme recherché, déclarez une variable locale obsolete = false. N’appelez setResults que si !obsolete, et renvoyez une fonction de nettoyage qui affecte obsolete = true. React exécute ce nettoyage avant de relancer l’effet lorsque le terme change. Chaque exécution possède sa propre variable : l’ancienne réponse est ainsi ignorée.
Une réponse arrivée en dernier n’est pas forcément celle de la recherche actuelle.
