Comment améliorer les performances de recherche dans React With Anti-Rebond

Dans React, lors de l'implémentation de la fonctionnalité de recherche, le gestionnaire onChange appelle la fonction de recherche chaque fois que l'utilisateur tape dans la zone de saisie. Cette approche peut entraîner des problèmes de performances, en particulier si vous effectuez des appels d'API ou interrogez la base de données. Les appels fréquents à la fonction de recherche peuvent surcharger le serveur Web, entraînant des pannes ou une interface utilisateur qui ne répond pas. L'anti-rebond résout ce problème.

Qu’est-ce que le rebond?

En règle générale, vous implémentez la fonctionnalité de recherche dans React en appelant une fonction de gestionnaire onChange à chaque frappe, comme indiqué ci-dessous :

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };





instagram viewer

const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Bien que cela fonctionne, l'appel au backend pour mettre à jour les résultats de recherche à chaque pression de touche peut coûter cher. Par exemple, si vous recherchez « webdev », l’application enverra une requête au backend avec les valeurs « w », « nous », « web », etc.

L'anti-rebond est une technique qui fonctionne en retardant l'exécution d'une fonction jusqu'à ce qu'un délai se soit écoulé. La fonction anti-rebond détecte chaque fois que l'utilisateur tape et empêche l'appel au gestionnaire de recherche jusqu'à ce que le délai soit écoulé. Si l'utilisateur continue de taper pendant le délai, le minuteur est réinitialisé et React appelle à nouveau la fonction pour le nouveau délai. Ce processus se poursuit jusqu'à ce que l'utilisateur arrête de taper.

En attendant que les utilisateurs interrompent la saisie, l'anti-rebond garantit que votre application effectue uniquement les requêtes de recherche nécessaires, réduisant ainsi la charge du serveur.

Comment anti-rebond de la recherche dans React

Il existe plusieurs bibliothèques que vous pouvez utiliser pour implémenter l'anti-rebond. Vous pouvez également choisir de l'implémenter vous-même à partir de zéro à l'aide de JavaScript. setTimeout et clearTimeout les fonctions.

Cet article utilise la fonction anti-rebond de la bibliothèque lodash.

En supposant que votre projet React soit prêt, créez un nouveau composant appelé Recherche. Si vous n'avez pas de projet fonctionnel, créez une application React à l'aide du créer un utilitaire d'application React.

Dans le Recherche composant, copiez le code suivant pour créer une zone de saisie de recherche qui appelle une fonction de gestionnaire à chaque frappe.

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Pour faire rebondir le handleSearch fonction, transmettez-la au anti-rebond fonction de lodash.

import debounce from"lodash.debounce";
import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const debouncedSearch = debounce(handleSearch, 1000);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Dans le anti-rebond fonction, vous transmettez la fonction que vous souhaitez retarder, c'est-à-dire le handleSearch fonction et le temps de retard en millisecondes, soit 500 ms.

Alors que le code ci-dessus devrait retarder l'appel au handleSearch demande jusqu'à ce que l'utilisateur arrête de taper, cela ne fonctionne pas dans React. Nous expliquerons pourquoi dans la section suivante.

Anti-rebond et rendus

Cette application utilise une entrée contrôlée. Cela signifie que la valeur de l'état contrôle la valeur de l'entrée; chaque fois qu'un utilisateur tape dans le champ de recherche, React met à jour l'état.

Dans React, lorsqu'une valeur d'état change, React restitue le composant et exécute toutes les fonctions qu'il contient.

Dans le composant de recherche ci-dessus, lorsque le composant est restitué, React exécute la fonction anti-rebond. La fonction crée une nouvelle minuterie qui garde une trace du retard et l'ancienne minuterie reste dans la mémoire. Lorsque son temps est écoulé, il déclenche la fonction de recherche. Cela signifie que la fonction de recherche n'est jamais anti-rebond, elle est retardée de 500 ms. Ce cycle se répète à chaque rendu: la fonction crée un nouveau minuteur, l'ancien minuteur expire puis appelle la fonction de recherche.

Pour que la fonction anti-rebond fonctionne, vous ne devez l'appeler qu'une seule fois. Vous pouvez le faire en appelant la fonction anti-rebond en dehors du composant ou en en utilisant la technique de mémorisation. De cette façon, même si le composant est restitué, React ne l'exécutera pas à nouveau.

Définir la fonction anti-rebond en dehors du composant de recherche

Bouge le anti-rebond fonctionner en dehors du Recherche composant comme indiqué ci-dessous :

import debounce from"lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);

Maintenant, dans le Recherche composant, appel anti-rebondRecherche et transmettez le terme de recherche.

exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

La fonction de recherche ne sera appelée qu'une fois le délai écoulé.

Mémorisation de la fonction anti-rebond

La mémorisation fait référence à la mise en cache des résultats d'une fonction et à leur réutilisation lorsque vous appelez la fonction avec les mêmes arguments.

Pour mémoriser le anti-rebond fonction, utilisez la utiliserMémo crochet.

import debounce from"lodash.debounce";
import { useCallback, useMemo, useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = useCallback((searchTerm) => {
console.log("Search for:", searchTerm);
 }, []);
const debouncedSearch = useMemo(() => {
return debounce(handleSearch, 500);
 }, [handleSearch]);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Notez que vous avez également enveloppé le handleSearch fonctionner dans un utiliserCallback hook pour garantir que React ne l’appelle qu’une seule fois. Sans le utiliserCallback hook, React exécuterait le handleSearch fonctionner à chaque nouveau rendu en créant les dépendances du utiliserMémo changement de crochet qui à son tour appellerait le anti-rebond fonction.

Désormais, React appellera uniquement le anti-rebond fonctionner si le handleSearch fonction ou le temps de retard change.

Optimisez la recherche avec anti-rebond

Parfois, ralentir peut être meilleur pour les performances. Lors de la gestion de tâches de recherche, en particulier avec des appels de base de données ou d'API coûteux, l'utilisation d'une fonction anti-rebond est la voie à suivre. Cette fonction introduit un délai avant l'envoi des requêtes backend.

Cela permet de réduire le nombre de requêtes adressées au serveur, car il n'envoie la requête qu'une fois le délai écoulé et que l'utilisateur a interrompu la saisie. De cette façon, le serveur n'est pas surchargé par trop de requêtes et les performances restent efficaces.