Jak zlepšit výkon vyhledávání v reakci na debouncing

V Reactu při implementaci vyhledávací funkce volá obsluha onChange vyhledávací funkci pokaždé, když uživatel zadá do vstupního pole. Tento přístup může způsobit problémy s výkonem, zejména při volání API nebo dotazování na databázi. Častá volání vyhledávací funkce mohou přetížit webový server, což vede k selhání nebo nereagujícímu uživatelskému rozhraní. Debouncing tento problém řeší.

Co je debouncing?

Obvykle implementujete funkci vyhledávání v React voláním funkce onChange handler při každém stisku klávesy, jak je znázorněno níže:

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

I když to funguje, volání na backend k aktualizaci výsledků vyhledávání při každém stisknutí klávesy může být drahé. Pokud byste například hledali „webdev“, aplikace by backendu odeslala požadavek s hodnotami „w“, „we“, „web“ a tak dále.

Debouncing je technika, která funguje tak, že zpožďuje provedení funkce, dokud neuplyne doba zpoždění. Funkce debounce detekuje pokaždé, když uživatel zadá, a zabrání volání obslužné rutiny vyhledávání, dokud neuplyne zpoždění. Pokud uživatel pokračuje v psaní během prodlevy, časovač se vynuluje a React vyvolá funkci znovu pro nové zpoždění. Tento proces pokračuje, dokud uživatel nepozastaví psaní.

Čekáním, až uživatelé pozastaví psaní, zajistí debouncing, že vaše aplikace provede pouze nezbytné vyhledávací požadavky, čímž se sníží zatížení serveru.

Jak debounce Search v Reactu

Existuje několik knihoven, které můžete použít k implementaci debounce. Můžete se také rozhodnout jej implementovat sami od začátku pomocí JavaScriptu setTimeout a clearTimeout funkcí.

Tento článek používá funkci debounce from knihovna lodash.

Za předpokladu, že máte připravený projekt React, vytvořte novou komponentu s názvem Vyhledávání. Pokud nemáte funkční projekt, vytvořte si aplikaci React pomocí vytvořit utilitu aplikace React.

V Vyhledávání komponent, zkopírujte následující kód a vytvořte vstupní pole pro vyhledávání, které při každém stisku klávesy volá funkci obslužné rutiny.

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

Chcete-li odrazit handleSearch funkci, předejte ji odskočit funkce z 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čit funkce, předáváte funkci, kterou chcete zpozdit, tj handleSearch funkce a doba zpoždění v milisekundách, tj. 500 ms.

Zatímco výše uvedený kód by měl zpozdit volání na handleSearch požadavek, dokud uživatel nepozastaví psaní, v Reactu to nefunguje. Proč tomu tak je, vysvětlíme v následující části.

Debouncing a Rerenders

Tato aplikace používá řízený vstup. To znamená, že hodnota stavu řídí hodnotu vstupu; pokaždé, když uživatel zadá do vyhledávacího pole React, aktualizuje stav.

Když se v React změní hodnota stavu, React znovu vykreslí komponentu a provede všechny funkce v ní.

Ve výše uvedené vyhledávací komponentě, když se komponenta znovu vykreslí, React spustí funkci debounce. Funkce vytvoří nový časovač, který sleduje zpoždění a starý časovač je uložen v paměti. Když uplyne jeho čas, spustí funkci vyhledávání. To znamená, že funkce vyhledávání není nikdy debounced, je zpožděna o 500 ms. Tento cyklus se opakuje při každém renderu – funkce vytvoří nový časovač, starý časovač vyprší a poté zavolá vyhledávací funkci

Aby funkce debounce fungovala, musíte ji zavolat pouze jednou. Můžete to udělat voláním funkce debounce mimo komponentu nebo pomocí pomocí memoizační techniky. Tímto způsobem, i když se komponenta znovu vykreslí, React ji znovu nespustí.

Definování funkce debounce mimo vyhledávací komponentu

Přesuňte odskočit fungovat mimo Vyhledávání komponent, jak je znázorněno níže:

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

Nyní, v Vyhledávání komponenta, hovor debouncedSearch a předat hledaný 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..."
 />
 );
}

Funkce vyhledávání bude vyvolána až po uplynutí doby zpoždění.

Zapamatujte si funkci Debounce

Memoování se týká ukládání výsledků funkce do mezipaměti a jejich opětovného použití, když funkci voláte se stejnými argumenty.

Chcete-li si zapamatovat odskočit funkci, použijte použít Memo háček.

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šimněte si, že jste také zabalili handleSearch funkce v a použijte zpětné volání háček, abyste zajistili, že React zavolá pouze jednou. Bez použijte zpětné volání hák, React provede handleSearch fungovat s každým překreslením, které vytváří závislosti na použít Memo změna háku, která by zase volala odskočit funkce.

Nyní React zavolá pouze odskočit funkce, pokud handleSearch funkce nebo se změní doba zpoždění.

Optimalizujte vyhledávání pomocí debounce

Někdy může být zpomalení lepší pro výkon. Při zpracovávání úloh vyhledávání, zejména u drahých volání databází nebo API, je použití funkce debounce tou správnou cestou. Tato funkce zavádí zpoždění před odesláním backendových požadavků.

Pomáhá snížit počet požadavků na server, protože požadavek odešle až po uplynutí prodlevy a po pozastavení psaní. Tímto způsobem se server nepřetěžuje příliš mnoha požadavky a výkon zůstává efektivní.