So verbessern Sie die Suchleistung in React mit Debounce

In React ruft der onChange-Handler bei der Implementierung der Suchfunktion die Suchfunktion jedes Mal auf, wenn der Benutzer etwas in das Eingabefeld eingibt. Dieser Ansatz kann zu Leistungsproblemen führen, insbesondere bei API-Aufrufen oder Datenbankabfragen. Häufige Aufrufe der Suchfunktion können den Webserver überlasten, was zu Abstürzen oder einer nicht reagierenden Benutzeroberfläche führt. Entprellen löst dieses Problem.

Was ist Entprellen?

Normalerweise implementieren Sie die Suchfunktion in React, indem Sie bei jedem Tastendruck eine onChange-Handlerfunktion aufrufen, wie unten gezeigt:

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();
 };





instagram viewer
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Dies funktioniert zwar, aber der Aufruf an das Backend, die Suchergebnisse bei jedem Tastendruck zu aktualisieren, kann teuer werden. Wenn Sie beispielsweise nach „webdev“ suchen, sendet die Anwendung eine Anfrage mit den Werten „w“, „we“, „web“ usw. an das Backend.

Beim Entprellen handelt es sich um eine Technik, bei der die Ausführung einer Funktion verzögert wird, bis eine Verzögerungszeit abgelaufen ist. Die Entprellungsfunktion erkennt jedes Mal, wenn der Benutzer etwas eingibt, und verhindert den Aufruf des Suchhandlers, bis die Verzögerung abgelaufen ist. Wenn der Benutzer innerhalb des Verzögerungszeitraums weiter tippt, wird der Timer zurückgesetzt und React ruft die Funktion für die neue Verzögerung erneut auf. Dieser Vorgang wird fortgesetzt, bis der Benutzer die Eingabe unterbricht.

Durch die Entprellung wird darauf gewartet, dass Benutzer die Eingabe unterbrechen. Dadurch wird sichergestellt, dass Ihre Anwendung nur die erforderlichen Suchanfragen durchführt, wodurch die Serverlast verringert wird.

So entprallen Sie die Suche in React

Es gibt mehrere Bibliotheken, die Sie zum Implementieren von Debounce verwenden können. Sie können es auch mithilfe von JavaScript selbst von Grund auf implementieren setTimeout Und clearTimeout Funktionen.

Dieser Artikel verwendet die Entprellfunktion von Die Lodash-Bibliothek.

Vorausgesetzt, Sie haben ein React-Projekt bereit, erstellen Sie eine neue Komponente mit dem Namen Suchen. Wenn Sie kein funktionierendes Projekt haben, erstellen Sie eine React-App mit Erstellen Sie ein React-App-Dienstprogramm.

Im Suchen Komponentendatei kopieren Sie den folgenden Code, um ein Sucheingabefeld zu erstellen, das bei jedem Tastendruck eine Handlerfunktion aufruft.

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..."
 />
 );
}

Um das zu entprellen handleSearch Funktion, übergeben Sie es an die entprellen Funktion von 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..."
 />
 );
}

Im entprellen Funktion übergeben Sie die Funktion, die Sie verzögern möchten, d. h. die handleSearch Funktion und die Verzögerungszeit in Millisekunden, d. h. 500 ms.

Während der obige Code den Anruf verzögern sollte handleSearch Anfrage, bis der Benutzer die Eingabe unterbricht, funktioniert es in React nicht. Warum das so ist, erklären wir im folgenden Abschnitt.

Entprellen und erneutes Rendern

Diese Anwendung verwendet eine kontrollierte Eingabe. Das bedeutet, dass der Statuswert den Wert der Eingabe steuert; Jedes Mal, wenn ein Benutzer das Suchfeld eingibt, aktualisiert React den Status.

Wenn sich in React ein Zustandswert ändert, rendert React die Komponente neu und führt alle darin enthaltenen Funktionen aus.

Wenn die Komponente in der obigen Suchkomponente erneut gerendert wird, führt React die Entprellungsfunktion aus. Die Funktion erstellt einen neuen Timer, der die Verzögerung verfolgt, und der alte Timer verbleibt im Speicher. Wenn die Zeit abgelaufen ist, wird die Suchfunktion ausgelöst. Dies bedeutet, dass die Suchfunktion niemals entprellt wird, sondern um 500 ms verzögert wird. Dieser Zyklus wiederholt sich bei jedem Rendern – die Funktion erstellt einen neuen Timer, der alte Timer läuft ab und ruft dann die Suchfunktion auf

Damit die Entprellfunktion funktioniert, müssen Sie sie nur einmal aufrufen. Sie können dies tun, indem Sie die Debounce-Funktion außerhalb der Komponente aufrufen oder indem unter Verwendung der Memoisierungstechnik. Auf diese Weise führt React die Komponente selbst dann nicht erneut aus, wenn sie erneut gerendert wird.

Definieren der Entprellfunktion außerhalb der Suchkomponente

Beweg das entprellen Funktion außerhalb der Suchen Komponente wie unten gezeigt:

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

Nun, im Suchen Komponente, Aufruf debouncedSearch und geben Sie den Suchbegriff ein.

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..."
 />
 );
}

Die Suchfunktion wird erst nach Ablauf der Verzögerungszeit aufgerufen.

Auswendiglernen der Debounce-Funktion

Beim Auswendiglernen geht es darum, die Ergebnisse einer Funktion zwischenzuspeichern und wiederzuverwenden, wenn Sie die Funktion mit denselben Argumenten aufrufen.

Um sich das zu merken entprellen Funktion, verwenden Sie die Verwenden Sie Memo Haken.

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..."
 />
 );
}

Beachten Sie, dass Sie auch das verpackt haben handleSearch Funktion in a useCallback Hook, um sicherzustellen, dass React ihn nur einmal aufruft. Ohne das useCallback Hook, React würde das ausführen handleSearch Funktion mit jedem erneuten Rendern, wobei die Abhängigkeiten der erstellt werden Verwenden Sie Memo Hook-Änderung, die wiederum das aufrufen würde entprellen Funktion.

Jetzt ruft React nur noch das auf entprellen Funktion, wenn die handleSearch Funktion oder die Verzögerungszeit ändert sich.

Optimieren Sie die Suche mit Debounce

Manchmal kann es für die Leistung besser sein, langsamer zu fahren. Bei Suchaufgaben, insbesondere bei teuren Datenbank- oder API-Aufrufen, ist die Verwendung einer Debounce-Funktion die richtige Wahl. Diese Funktion führt zu einer Verzögerung vor dem Senden von Backend-Anfragen.

Dies trägt dazu bei, die Anzahl der an den Server gestellten Anfragen zu reduzieren, da die Anfrage erst gesendet wird, nachdem die Verzögerung abgelaufen ist und der Benutzer die Eingabe unterbrochen hat. Auf diese Weise wird der Server nicht durch zu viele Anfragen überlastet und die Leistung bleibt effizient.