Hvordan forbedre søkeytelsen ved å reagere med debouncing

I React, når du implementerer søkefunksjonaliteten, kaller onChange-behandleren søkefunksjonen hver gang brukeren skriver inn i inndataboksen. Denne tilnærmingen kan forårsake ytelsesproblemer, spesielt hvis du foretar API-anrop eller spør etter databasen. Hyppige anrop til søkefunksjonen kan overbelaste webserveren, noe som kan føre til krasjer eller ikke-svarende brukergrensesnitt. Debouncing løser dette problemet.

Hva er debouncing?

Vanligvis implementerer du søkefunksjonaliteten i React ved å kalle en onChange-behandlerfunksjon ved hvert tastetrykk som vist nedenfor:

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

Selv om dette fungerer, kan oppfordringen til backend for å oppdatere søkeresultater ved hvert tastetrykk bli dyrt. For eksempel, hvis du søkte etter "webdev", ville applikasjonen sende en forespørsel til backend med verdiene "w", "we", "web" og så videre.

Debouncing er en teknikk som fungerer ved å utsette utførelsen av en funksjon til en forsinkelsesperiode har gått. Debounce-funksjonen oppdager hver gang brukeren skriver og forhindrer anropet til søkebehandleren inntil forsinkelsen har utløpt. Hvis brukeren fortsetter å skrive innenfor forsinkelsesperioden, tilbakestilles timeren og React kaller opp funksjonen igjen for den nye forsinkelsen. Denne prosessen fortsetter til brukeren stopper å skrive.

Ved å vente på at brukerne skal sette skrivingen på pause, sikrer debouncing at applikasjonen din bare gjør de nødvendige søkeforespørslene og reduserer dermed serverbelastningen.

Hvordan avvise søk i React

Det er flere biblioteker du kan bruke til å implementere debounce. Du kan også velge å implementere det selv fra bunnen av ved hjelp av JavaScript setTimeout og clearTimeout funksjoner.

Denne artikkelen bruker debounce-funksjonen fra lodash-biblioteket.

Forutsatt at du har et React-prosjekt klart, lag en ny komponent kalt Søk. Hvis du ikke har et fungerende prosjekt, lag en React-app ved å bruke opprette React-app-verktøyet.

I Søk komponentfil, kopier følgende kode for å lage en søkeinndataboks som kaller opp en behandlerfunksjon ved hvert tastetrykk.

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

For å avvise håndtere Søk funksjon, send den til avsprette funksjon fra 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..."
 />
 );
}

I avsprette funksjon, sender du inn funksjonen du vil forsinke, dvs håndtere Søk funksjon, og forsinkelsestiden i millisekunder, dvs. 500ms.

Mens koden ovenfor bør forsinke anropet til håndtere Søk forespørsel inntil brukeren pauser å skrive, det fungerer ikke i React. Vi forklarer hvorfor i den følgende delen.

Debouncing og gjengivelser

Denne applikasjonen bruker en kontrollert inngang. Dette betyr at tilstandsverdien kontrollerer verdien av inngangen; hver gang en bruker skriver i søkefeltet oppdaterer React tilstanden.

I React, når en tilstandsverdi endres, gjengir React komponenten og utfører alle funksjonene i den.

I søkekomponenten ovenfor, når komponenten gjengis, utfører React debounce-funksjonen. Funksjonen lager en ny timer som holder styr på forsinkelsen og den gamle timeren sitter i minnet. Når tiden går ut, aktiverer den søkefunksjonen. Dette betyr at søkefunksjonen aldri blir avvist, den er forsinket med 500 ms. Denne syklusen gjentas for hver gjengivelse - funksjonen oppretter en ny tidtaker, den gamle tidtakeren utløper og deretter kaller den søkefunksjonen

For at debounce-funksjonen skal fungere, må du bare ringe den én gang. Du kan gjøre dette ved å kalle debounce-funksjonen utenfor komponenten eller ved ved hjelp av memoiseringsteknikken. På denne måten, selv om komponenten gjengir, vil ikke React kjøre den igjen.

Definere debounce-funksjonen utenfor søkekomponenten

Flytt avsprette funksjon utenfor Søk komponent som vist nedenfor:

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

Nå, i Søk komponent, ring debouncedSearch og gi inn søkeordet.

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

Søkefunksjonen vil først bli kalt opp etter at forsinkelsesperioden er utløpt.

Lagre Debounce-funksjonen

Memoizing refererer til å bufre resultatene av en funksjon og gjenbruke dem når du kaller funksjonen med de samme argumentene.

Å huske på avsprette funksjon, bruk bruk Memo krok.

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 at du også har pakket inn håndtere Søk funksjon i en bruk tilbakeringing koble til for å sikre at React bare ringer den én gang. Uten bruk tilbakeringing krok, ville React utføre håndtere Søk funksjon med hver gjengivelse som gjør avhengighetene til bruk Memo krokskifte som igjen ville kalle avsprette funksjon.

Nå vil React bare ringe til avsprette funksjon hvis håndtere Søk funksjon eller forsinkelsestiden endres.

Optimaliser søk med Debounce

Noen ganger kan nedbremsing være bedre for ytelsen. Når du håndterer søkeoppgaver, spesielt med dyre database- eller API-anrop, er bruk av en debounce-funksjon veien å gå. Denne funksjonen introduserer en forsinkelse før sending av backend-forespørsler.

Det bidrar til å redusere antall forespørsler til serveren, siden den bare sender forespørselen etter at forsinkelsen har utløpt og brukeren har stoppet skrivingen. På denne måten blir ikke serveren overbelastet med for mange forespørsler, og ytelsen forblir effektiv.