Vältä palvelimen ylikuormittamista tarpeettomilla hakutoimintokutsuilla ja optimoi sovelluksesi suorituskyky tällä tekniikalla.

Reactissa hakutoimintoa toteutettaessa onChange-käsittelijä kutsuu hakutoimintoa aina, kun käyttäjä kirjoittaa syöttöruutuun. Tämä lähestymistapa voi aiheuttaa suorituskykyongelmia, varsinkin jos tehdään API-kutsuja tai kyselyitä tietokannasta. Toistuvat kutsut hakutoimintoon voivat ylikuormittaa verkkopalvelinta, mikä voi johtaa kaatumisiin tai reagoimattomaan käyttöliittymään. Palautus ratkaisee tämän ongelman.

Mitä on debouncing?

Yleensä otat hakutoiminnon käyttöön Reactissa kutsumalla onChange-käsittelijätoimintoa jokaisella näppäinpainalluksella alla olevan kuvan mukaisesti:

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

Vaikka tämä toimii, puhelu taustajärjestelmään hakutulosten päivittämiseksi jokaisella näppäinpainalluksella voi tulla kalliiksi. Jos esimerkiksi etsit "webdev", sovellus lähettää pyynnön taustajärjestelmään arvoilla "w", "we", "web" ja niin edelleen.

Debouncing on tekniikka, joka toimii viivyttämällä toiminnon suorittamista, kunnes viivejakso on kulunut. Debounce-toiminto havaitsee aina, kun käyttäjä kirjoittaa ja estää kutsun haun käsittelijälle, kunnes viive on kulunut. Jos käyttäjä jatkaa kirjoittamista viivejakson sisällä, ajastin nollautuu ja React kutsuu toimintoa uudelleen uudelle viiveelle. Tämä prosessi jatkuu, kunnes käyttäjä keskeyttää kirjoittamisen.

Odottamalla käyttäjien keskeyttävän kirjoittamisen, palautus varmistaa, että sovelluksesi tekee vain tarvittavat hakupyynnöt, mikä vähentää palvelimen kuormitusta.

Kuinka peruuttaa haku Reactissa

On olemassa useita kirjastoja, joiden avulla voit toteuttaa debouncen. Voit myös ottaa sen itse käyttöön JavaScriptin avulla setTimeout ja clearTimeout toimintoja.

Tämä artikkeli käyttää debounce-toimintoa from lodash-kirjasto.

Olettaen, että sinulla on React-projekti valmiina, luo uusi komponentti nimeltä Hae. Jos sinulla ei ole toimivaa projektia, luo React-sovellus käyttämällä luo React-apuohjelma.

Vuonna Hae komponenttitiedosto, kopioi seuraava koodi luodaksesi hakusyöttöruudun, joka kutsuu käsittelijän toiminnon jokaisella näppäinpainalluksella.

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

Debounce käsittele Haku toiminto, välitä se palautua toiminto lodashista.

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

Vuonna palautua funktio, välität funktion, jota haluat viivyttää, eli käsittele Haku funktio ja viiveaika millisekunteina eli 500 ms.

Vaikka yllä olevan koodin pitäisi viivyttää puhelua numeroon käsittele Haku pyyntöä, kunnes käyttäjä keskeyttää kirjoittamisen, se ei toimi Reactissa. Selitämme miksi seuraavassa osiossa.

Debouncing ja Rerenders

Tämä sovellus käyttää ohjattua syöttöä. Tämä tarkoittaa, että tila-arvo ohjaa tulon arvoa; aina kun käyttäjä kirjoittaa hakukenttään React päivittää tilan.

Reactissa, kun tila-arvo muuttuu, React hahmontaa komponentin uudelleen ja suorittaa kaikki sen sisällä olevat toiminnot.

Yllä olevassa hakukomponentissa, kun komponentti hahmonnetaan uudelleen, React suorittaa debounce-toiminnon. Toiminto luo uuden ajastimen, joka seuraa viivettä ja vanha ajastin jää muistiin. Kun sen aika kuluu loppuun, se käynnistää hakutoiminnon. Tämä tarkoittaa, että hakutoimintoa ei koskaan peruuteta, se viivästyy 500 ms. Tämä sykli toistuu jokaisella renderöinnillä – toiminto luo uuden ajastimen, vanha ajastin vanhenee ja sitten se kutsuu hakutoiminnon

Jotta debounce-toiminto toimisi, sinun on kutsuttava sitä vain kerran. Voit tehdä tämän kutsumalla debounce-funktiota komponentin ulkopuolella tai käyttämällä käyttämällä memoisointitekniikkaa. Tällä tavalla, vaikka komponentti renderöisi uudelleen, React ei suorita sitä uudelleen.

Debounce-funktion määrittäminen hakukomponentin ulkopuolella

Siirrä palautua toiminto ulkopuolella Hae komponentti alla olevan kuvan mukaisesti:

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


const debouncedSearch = debounce(handleSearch, 500);

Nyt sisällä Hae komponentti, soita debouncedSearch ja välitä hakusana.

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

Hakutoimintoa kutsutaan vasta viiveajan umpeuduttua.

Debounce-toiminnon muistaminen

Muistiin jättäminen tarkoittaa funktion tulosten tallentamista välimuistiin ja niiden uudelleenkäyttöä, kun kutsut funktiota samoilla argumenteilla.

Muistellaksesi palautua -toimintoa, käytä käytäMemoa koukku.

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

Huomaa, että olet myös käärinyt käsittele Haku toiminto kohdassa a käytä takaisinsoittoa koukku varmistaaksesi, että React kutsuu sitä vain kerran. Ilman käytä takaisinsoittoa koukku, React suorittaisi käsittele Haku funktion jokaisen uudelleenrenderöinnin yhteydessä, joka tekee riippuvuuksista käytäMemoa koukun vaihto, joka puolestaan ​​kutsuisi palautua toiminto.

Nyt React soittaa vain palautua toiminto, jos käsittele Haku toiminto tai viiveaika muuttuu.

Optimoi haku Debouncen avulla

Joskus hidastaminen voi olla parempi suorituskyvyn kannalta. Käsiteltäessä hakutehtäviä, erityisesti kalliiden tietokanta- tai API-kutsujen kanssa, debounce-toiminnon käyttäminen on oikea tapa edetä. Tämä toiminto lisää viiveen ennen taustapyyntöjen lähettämistä.

Se auttaa vähentämään palvelimelle tehtyjen pyyntöjen määrää, koska se lähettää pyynnön vasta, kun viive on kulunut ja käyttäjä on keskeyttänyt kirjoittamisen. Tällä tavalla palvelin ei ylikuormitu liian monilla pyynnöillä ja suorituskyky pysyy tehokkaana.