Ako zlepšiť výkonnosť vyhľadávania v reakcii na debouncing

V Reacte pri implementácii funkcie vyhľadávania obsluha onChange volá funkciu vyhľadávania vždy, keď používateľ zadá do vstupného poľa. Tento prístup môže spôsobiť problémy s výkonom, najmä ak vykonávate volania API alebo dopytujete databázu. Časté volania na funkciu vyhľadávania môžu preťažiť webový server, čo môže viesť k zlyhaniu alebo nereagovaniu používateľského rozhrania. Debouncing tento problém rieši.

Čo je debouncing?

Funkcionalitu vyhľadávania v Reacte zvyčajne implementujete volaním funkcie obsluhy onChange pri každom stlačení klávesu, ako je uvedené nižšie:

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

Aj keď to funguje, volanie na backend na aktualizáciu výsledkov vyhľadávania pri každom stlačení klávesu môže byť drahé. Ak by ste napríklad hľadali „webdev“, aplikácia odošle backendu požiadavku s hodnotami „w“, „we“, „web“ atď.

Debouncing je technika, ktorá funguje tak, že oneskoruje vykonanie funkcie, kým neuplynie doba oneskorenia. Funkcia debounce deteguje zakaždým, keď používateľ zadá, a zabráni volaniu obsluhy vyhľadávania, kým neuplynie oneskorenie. Ak používateľ pokračuje v písaní počas doby oneskorenia, časovač sa vynuluje a funkcia React znova zavolá funkciu pre nové oneskorenie. Tento proces pokračuje, kým používateľ nepozastaví písanie.

Čakaním, kým používatelia prestanú písať, debouncing zaistí, že vaša aplikácia vykoná iba nevyhnutné požiadavky na vyhľadávanie, čím sa zníži zaťaženie servera.

Ako zrušiť vyhľadávanie v React

Existuje niekoľko knižníc, ktoré môžete použiť na implementáciu debounce. Môžete sa tiež rozhodnúť implementovať ho sami od začiatku pomocou JavaScriptu setTimeout a clearTimeout funkcie.

Tento článok používa funkciu debounce from knižnica lodash.

Za predpokladu, že máte pripravený projekt React, vytvorte nový komponent s názvom Vyhľadávanie. Ak nemáte funkčný projekt, vytvorte aplikáciu React pomocou vytvorte utilitu aplikácie React.

V Vyhľadávanie komponentný súbor, skopírujte nasledujúci kód, aby ste vytvorili vyhľadávacie vstupné pole, ktoré pri každom stlačení klávesu volá funkciu obsluhy.

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

Na odskočenie handleSearch funkciu, odovzdajte ju odskočiť funkcia od 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..."
 />
 );
}

V odskočiť funkciu, odovzdávate funkciu, ktorú chcete oneskoriť, tj handleSearch a čas oneskorenia v milisekundách, t.j. 500 ms.

Kým vyššie uvedený kód by mal oddialiť hovor na handleSearch požiadať, kým používateľ nepozastaví písanie, v React to nefunguje. V nasledujúcej časti si vysvetlíme prečo.

Debouncing a Rerenders

Táto aplikácia používa riadený vstup. To znamená, že hodnota stavu riadi hodnotu vstupu; zakaždým, keď používateľ zadá do vyhľadávacieho poľa React aktualizuje stav.

V React, keď sa hodnota stavu zmení, React prekreslí komponent a vykoná všetky funkcie v ňom.

Vo vyššie uvedenom vyhľadávacom komponente, keď sa komponent znova vykreslí, React spustí funkciu debounce. Funkcia vytvorí nový časovač, ktorý sleduje oneskorenie a starý časovač je uložený v pamäti. Keď uplynie jeho čas, spustí funkciu vyhľadávania. To znamená, že funkcia vyhľadávania nie je nikdy odskočená, je oneskorená o 500 ms. Tento cyklus sa opakuje pri každom vykreslení – funkcia vytvorí nový časovač, starý časovač vyprší a potom zavolá funkciu vyhľadávania

Aby funkcia debounce fungovala, musíte ju zavolať iba raz. Môžete to urobiť volaním funkcie debounce mimo komponentu alebo pomocou pomocou memoizačnej techniky. Týmto spôsobom, aj keď sa komponent znova vykreslí, React ho znova nespustí.

Definovanie funkcie debounce mimo komponentu vyhľadávania

Presuňte odskočiť funkciu mimo Vyhľadávanie komponent, ako je znázornené nižšie:

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

Teraz, v Vyhľadávanie komponent, hovor debouncedSearch a zadajte hľadaný výraz.

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

Funkcia vyhľadávania bude vyvolaná až po uplynutí doby oneskorenia.

Zapamätanie funkcie Debounce

Zapamätanie sa týka ukladania výsledkov funkcie do vyrovnávacej pamäte a ich opätovného použitia, keď funkciu voláte s rovnakými argumentmi.

Na zapamätanie si odskočiť funkciu, použite useMemo háčik.

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

Všimnite si, že ste tiež zabalili handleSearch funkcia v a použite spätné volanie háčik, aby ste sa uistili, že React ho zavolá iba raz. Bez použite spätné volanie hák, React vykoná handleSearch fungovať pri každom opätovnom vykreslení, ktoré vytvára závislosti useMemo zmena háku, ktorá by zase volala odskočiť funkciu.

Teraz React zavolá iba na odskočiť funkciu, ak handleSearch funkcia alebo sa zmení čas oneskorenia.

Optimalizujte vyhľadávanie s debounce

Niekedy môže byť spomalenie lepšie pre výkon. Pri spracovávaní úloh vyhľadávania, najmä pri drahých volaniach databáz alebo API, je použitie funkcie debounce tou správnou cestou. Táto funkcia zavádza oneskorenie pred odoslaním backendových požiadaviek.

Pomáha to znížiť počet požiadaviek na server, pretože požiadavku odošle až po uplynutí oneskorenia a po prerušení písania. Týmto spôsobom sa server nepreťaží príliš veľkým množstvom požiadaviek a výkon zostane efektívny.