Retour à la leçonMission
Mission : fusionner trois recherches dupliquées en un seul hook
Extraire une logique fetch dupliquée dans un hook useFetch, et corriger un useDebounce mal câblé qui déclenche trop d'appels réseau.
Contexte
UserSearch.jsx, ProductSearch.jsx et TagSearch.jsx contiennent chacun leur propre copie de cette logique, avec de petites différences qui ont divergé au fil du temps : l'un oublie de gérer l'erreur, l'autre ne protège pas contre une réponse obsolète. Par ailleurs, ProductSearch appelle l'API directement dans onChange={(e) => { setTerme(e.target.value); fetch(/api/produits?q=${e.target.value}); }}, ce qui déclenche une requête réseau à CHAQUE frappe, saturant le serveur de test lors de la démo client.