Implémenter le hook personnalisé useDebounce

Le crochet useDebounce accepte une valeur et un délai en millisecondes, puis renvoie une version temporisée de cette valeur : function useDebounce(value, delay). La valeur debouncedValue renvoyée reste en retard sur la valeur réelle et ne se met à jour qu’une fois le délai indiqué écoulé sans autre changement.

Dans le crochet, déclarez une variable d’état : const [debouncedValue, setDebouncedValue] = useState(value). Cet état contient la dernière valeur validée. Il commence avec la valeur initiale et ne se met à jour qu’après le déclenchement du minuteur de temporisation. Les composants qui lisent debouncedValue obtiennent une valeur stable et finalisée.

La logique principale se trouve dans un useEffect : créez un minuteur avec setTimeout(() => setDebouncedValue(value), delay) et stockez son identifiant. L’effet s’exécute chaque fois que value ou delay change. Le minuteur se déclenche delay millisecondes après le dernier changement et met à jour l’état temporisé.

La fonction de nettoyage de useEffect appelle clearTimeout(timerId). Lorsque value change avant le déclenchement du minuteur, React exécute le nettoyage et annule la mise à jour en attente. Un nouveau minuteur est ensuite programmé. C’est le mécanisme essentiel de la temporisation différée : les changements rapides réinitialisent constamment le minuteur.

Le tableau de dépendances de useEffect doit contenir [value, delay]. L’effet est relancé chaque fois que la valeur d’entrée change, afin de programmer un nouveau minuteur, ainsi que chaque fois que le délai change, au cas où l’appelant ajusterait dynamiquement l’intervalle de temporisation. Les deux doivent être inclus pour éviter les problèmes liés aux fermetures obsolètes.

L’utilisation est simple : const debouncedSearch = useDebounce(searchInput, 300). Un autre useEffect ayant [debouncedSearch] comme dépendance déclenche l’appel à l’interface de programmation. L’état du champ (searchInput) se met à jour immédiatement, ce qui maintient la réactivité du champ ; seul l’appel à l’interface de programmation attend la temporisation.

Par défaut, l’implémentation standard ne s’exécute que sur le front final. Pour un mode « immédiat » qui appelle la fonction au premier déclenchement, puis temporise les appels suivants, vous devez utiliser une référence pour suivre si l’appel a déjà été effectué et la réinitialiser après le délai d’attente. Cette approche est plus complexe, mais utile pour les boutons d’envoi.

Rendez le crochet générique pour garantir la sûreté des types : function useDebounce(value: T, delay: number): T. Cela permet à TypeScript de déduire le type de debouncedValue à partir du type de value. Le paramètre générique T se propage automatiquement dans l’état interne et le type renvoyé.

Une erreur fréquente consiste à oublier de renvoyer la fonction de nettoyage depuis useEffect. Sans nettoyage, chaque changement de valeur crée un nouveau minuteur sans jamais annuler l’ancien. Plusieurs minuteurs se déclenchent alors et appellent plusieurs fois setDebouncedValue avec des valeurs obsolètes, ce qui annule complètement l’effet de la temporisation différée.

Une autre possibilité consiste à stocker la fonction de temporisation elle-même dans un useRef à l’aide de lodash. Contrairement à l’approche fondée sur l’état, l’approche fondée sur une référence temporise des fonctions de rappel plutôt que des valeurs. Utilisez le crochet fondé sur l’état lorsque vous avez besoin d’une valeur dérivée ; utilisez l’approche fondée sur une fonction de rappel lorsque vous devez temporiser un gestionnaire d’événement.

Vérifiez le fonctionnement de votre crochet en ajoutant une journalisation dans la fonction de rappel du minuteur, puis en observant la console du navigateur pendant une saisie rapide. Vous devez voir un journal par événement d’arrêt, et non un journal par frappe. Lors d’une saisie rapide, le nombre de journaux doit être bien inférieur au nombre de frappes.

Pourquoi le useEffect de useDebounce doit-il renvoyer une fonction de nettoyage qui appelle clearTimeout ?

Le crochet useDebounce(value, delay) conserve un état temporisé qui ne se met à jour qu’après delay ms de silence. Son useEffect définit un délai d’attente et l’annule lors du nettoyage afin d’éliminer les minuteurs obsolètes. Utilisez la valeur temporisée comme dépendance des effets qui récupèrent des données via l’interface de programmation. Ajoutez un type générique TypeScript pour garantir une sûreté complète des types.