Comment ajouter une fonction Debounce dans une app de recherche React

Pour faire suite à mon article précédant concernant la recherche dans une application React, je vais maintenant traiter du debounce dans une application de recherche. Une fonctionnalité debounce permet d’éviter qu’une opération soit exécutée plusieurs fois alors que ça n’est pas nécessaire.

Dans notre application, nous voulons éviter d’appeler une fonction ou une API de manière répétée et excessive lors de la saisie de texte dans un champ de recherche et ainsi d’éviter des problèmes de plantage de serveur.

Je vais reprendre l’exemple de mon précédent article pour utiliser le debouncing en JavaScript avec un cas pratique.

Voici le lien de l’exemple précédent : https://github.com/didiergrand/simple-search-app-techwithcy

Comment ajouter Debounce à notre application React

Nous allons tout d’abord créer une fonction useDebounce que nous pourrons utiliser pour le debounce de notre recherche.

Dans votre dossier src, créez un nouveau fichier useDebounce.js. Voici comment vous pouvez implémenter cette fonction :

import { useState, useEffect } from 'react';

export default function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

Cette fonction useDebounce est un hook personnalisé, elle a deux arguments, value est la valeur que nous allons debounce et delay est le temps de délai d’actualisation de la valeur en millisecondes.

Nous passons un array [value, delay] à useEffect qui sera exécuté à nouveau chaque fois que value ou delay changera.

Nous utilisons setTimeout pour créer un délai. Après ce délai, la fonction que nous passons à setTimeout sera exécutée. Dans cette fonction, nous utilisons setDebouncedValue(value) pour mettre à jour notre debouncedValue avec la dernière value fournie.

Nous utilisons clearTimeout(handler) pour annuler notre délai. Cela s’assure que notre debouncedValue ne sera pas mis à jour si notre composant est démonté avant que le délai ne soit écoulé.

Enfin, notre hook useDebounce renvoie la debouncedValue (return debouncedValue;). Cette valeur sera mise à jour avec la dernière value fournie après que le delay soit écoulé, à moins que le composant ne soit démonté avant la fin du délai.

Nous pouvons maintenant utiliser cette fonction dans notre composant App pour debounce la valeur de requête de recherche.

Implémentation de la fonction useDebounce

Nous pouvons utiliser cette fonction dans notre composant App et nous allons créer une variable debouncedSearchQuery qui sera la valeur debouncée de searchQuery.

import React, { useState, useEffect } from 'react';
import useDebounce from './useDebounce';

// ...

function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResult, setSearchResult] = useState([]);
  const debouncedSearchQuery = useDebounce(searchQuery, 500); // Debounce search query by 500ms

  useEffect(() => {
    if (debouncedSearchQuery) {
      // Make API call here...
    } else {
      setSearchResult([]);
    }
  }, [debouncedSearchQuery]);

  // ...

  return (
    // Render app here...
  );
}

export default App;

Dans cet exemple, nous avons créé une fonction qui exécute un debounce à chaque fois que debouncedSearchQuery change. Cette fonction déclenche un effet toutes les 500ms après que l’utilisateur ait arrêté de taper.

Voici le lien vers mon exemple complet : https://github.com/didiergrand/simple-search-app-with-debounce

J’espère que cet exemple vous sera utile.