Hoe u de zoekprestaties kunt verbeteren in reactie op debouncing

In React roept de onChange-handler bij het implementeren van de zoekfunctionaliteit de zoekfunctie aan telkens wanneer de gebruiker in het invoervak ​​typt. Deze aanpak kan prestatieproblemen veroorzaken, vooral bij het uitvoeren van API-aanroepen of het uitvoeren van query's op de database. Regelmatige oproepen naar de zoekfunctie kunnen de webserver overbelasten, wat kan leiden tot crashes of een niet-reagerende gebruikersinterface. Debouncing lost dit probleem op.

Wat is debouneren?

Meestal implementeert u de zoekfunctionaliteit in React door bij elke toetsaanslag een onChange-handlerfunctie aan te roepen, zoals hieronder weergegeven:

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

Hoewel dit werkt, kan de oproep naar de backend om de zoekresultaten bij elke toetsaanslag bij te werken duur worden. Als u bijvoorbeeld naar “webdev” zocht, zou de applicatie een verzoek naar de backend sturen met de waarden “w”, “we”, “web”, enzovoort.

Debouncing is een techniek die werkt door de uitvoering van een functie uit te stellen totdat een vertragingsperiode is verstreken. De debounce-functie detecteert elke keer dat de gebruiker typt en voorkomt de oproep naar de zoekhandler totdat de vertraging is verstreken. Als de gebruiker binnen de vertragingsperiode doorgaat met typen, wordt de timer gereset en roept React de functie opnieuw op voor de nieuwe vertraging. Dit proces gaat door totdat de gebruiker stopt met typen.

Door te wachten tot gebruikers stoppen met typen, zorgt debouncing ervoor dat uw applicatie alleen de noodzakelijke zoekopdrachten uitvoert, waardoor de serverbelasting wordt verminderd.

Hoe u zoeken in React kunt debouncen

Er zijn verschillende bibliotheken die u kunt gebruiken om debounce te implementeren. Je kunt er ook voor kiezen om het zelf helemaal opnieuw te implementeren met behulp van JavaScript setTime-out En clearTime-out functies.

Dit artikel maakt gebruik van de debounce-functie van de lodash-bibliotheek.

Ervan uitgaande dat u een React-project gereed heeft, maakt u een nieuwe component met de naam Zoekopdracht. Als je geen werkend project hebt, maak dan een React-app met behulp van de maak een React-app-hulpprogramma.

In de Zoekopdracht component-bestand, kopieert u de volgende code om een ​​zoekinvoervak ​​te maken dat bij elke toetsaanslag een handlerfunctie aanroept.

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

Om de handvatZoeken functie, geef het door aan de ontwijken functie van 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..."
 />
 );
}

In de ontwijken functie, u geeft de functie door die u wilt vertragen, d.w.z. de handvatZoeken functie en de vertragingstijd in milliseconden, d.w.z. 500 ms.

Terwijl de bovenstaande code de oproep naar de handvatZoeken verzoek totdat de gebruiker stopt met typen, het werkt niet in React. We leggen uit waarom in de volgende sectie.

Debouncing en Rerenders

Deze applicatie maakt gebruik van een gecontroleerde ingang. Dit betekent dat de statuswaarde de waarde van de invoer bepaalt; elke keer dat een gebruiker in het zoekveld typt, werkt React de status bij.

Wanneer in React een statuswaarde verandert, geeft React de component opnieuw weer en voert alle functies daarin uit.

In de bovenstaande zoekcomponent voert React, wanneer de component opnieuw wordt weergegeven, de debounce-functie uit. De functie creëert een nieuwe timer die de vertraging bijhoudt en de oude timer wordt in het geheugen opgeslagen. Wanneer de tijd verstrijkt, wordt de zoekfunctie geactiveerd. Dit betekent dat de zoekfunctie nooit wordt gedebounced, maar met 500 ms wordt vertraagd. Deze cyclus herhaalt zich bij elke weergave: de functie maakt een nieuwe timer aan, de oude timer loopt af en roept vervolgens de zoekfunctie aan

Om de debounce-functie te laten werken, hoeft u deze slechts één keer aan te roepen. U kunt dit doen door de debounce-functie buiten de component aan te roepen of door met behulp van de memoisatietechniek. Op deze manier zal React, zelfs als de component opnieuw wordt weergegeven, deze niet opnieuw uitvoeren.

De debounce-functie definiëren buiten de zoekcomponent

Verplaats de ontwijken functioneren buiten de Zoekopdracht onderdeel zoals hieronder weergegeven:

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

Nu, in de Zoekopdracht onderdeel, bel debouncedZoeken en geef de zoekterm door.

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

De zoekfunctie wordt pas opgeroepen nadat de vertragingsperiode is verstreken.

De debounce-functie onthouden

Memoiseren verwijst naar het in de cache opslaan van de resultaten van een functie en het hergebruiken ervan wanneer u de functie met dezelfde argumenten aanroept.

Om de ontwijken functie, gebruik de gebruikMemo haak.

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

Merk op dat je ook de handvatZoeken functie bij een gebruikTerugbellen hook om ervoor te zorgen dat React het slechts één keer aanroept. Zonder de gebruikTerugbellen hook, zou React de handvatZoeken functie waarbij elke re-render de afhankelijkheden van de gebruikMemo hook change die op zijn beurt de ontwijken functie.

Nu zal React alleen de ontwijken functie als de handvatZoeken functie of de vertragingstijd verandert.

Optimaliseer zoekopdrachten met Debounce

Soms kan vertragen beter zijn voor de prestaties. Bij het afhandelen van zoektaken, vooral bij dure database- of API-aanroepen, is het gebruik van een debounce-functie de juiste keuze. Deze functie introduceert een vertraging voordat backend-aanvragen worden verzonden.

Het helpt het aantal verzoeken aan de server te verminderen, omdat het verzoek pas wordt verzonden nadat de vertraging is verstreken en de gebruiker heeft gepauzeerd met typen. Op deze manier raakt de server niet overbelast met te veel verzoeken en blijven de prestaties efficiënt.