Hur man förbättrar sökprestanda när man reagerar med avstudsning

I React, när du implementerar sökfunktionen, anropar onChange-hanteraren sökfunktionen varje gång användaren skriver i inmatningsrutan. Detta tillvägagångssätt kan orsaka prestandaproblem, särskilt om du gör API-anrop eller frågar databasen. Frekventa anrop till sökfunktionen kan överbelasta webbservern, vilket leder till krascher eller att användargränssnittet inte svarar. Debouncing löser detta problem.

Vad är debouncing?

Vanligtvis implementerar du sökfunktionen i React genom att anropa en onChange-hanterarfunktion vid varje tangenttryckning som visas nedan:

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

Även om detta fungerar kan samtalet till backend för att uppdatera sökresultat vid varje knapptryckning bli dyrt. Till exempel, om du sökte efter "webdev", skulle applikationen skicka en begäran till backend med värdena "w", "we", "web" och så vidare.

Debouncing är en teknik som fungerar genom att fördröja exekveringen av en funktion tills en fördröjningsperiod har förflutit. Debounce-funktionen upptäcker varje gång användaren skriver och förhindrar anropet till sökhanteraren tills fördröjningen har löpt ut. Om användaren fortsätter skriva inom fördröjningsperioden återställs timern och React anropar funktionen igen för den nya fördröjningen. Denna process fortsätter tills användaren pausar att skriva.

Genom att vänta på att användarna ska pausa skrivandet säkerställer debouncing att din applikation endast gör de nödvändiga sökförfrågningarna och därmed minskar serverbelastningen.

Hur man avstudsar sökning i React

Det finns flera bibliotek du kan använda för att implementera debounce. Du kan också välja att implementera det själv från början med hjälp av JavaScript setTimeout och clearTimeout funktioner.

Den här artikeln använder debounce-funktionen från lodash-biblioteket.

Förutsatt att du har ett React-projekt redo, skapa en ny komponent som heter Sök. Om du inte har ett fungerande projekt, skapa en React-app med hjälp av skapa React app-verktyg.

I den Sök komponentfil, kopiera följande kod för att skapa en sökinmatningsruta som anropar en hanterarfunktion vid varje tangenttryckning.

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

Att avstudsa hanteraSök funktionen, skicka den till avstudsa funktion från 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 den avstudsa funktionen skickar du in den funktion du vill fördröja, dvs hanteraSök funktion och fördröjningstiden i millisekunder, dvs. 500ms.

Medan ovanstående kod bör försena samtalet till hanteraSök begäran tills användaren pausar att skriva, det fungerar inte i React. Vi förklarar varför i följande avsnitt.

Debouncing och återgivning

Denna applikation använder en kontrollerad ingång. Detta betyder att tillståndsvärdet styr värdet på ingången; varje gång en användare skriver i sökfältet uppdaterar React statusen.

I React, när ett tillståndsvärde ändras, återrenderar React komponenten och utför alla funktioner i den.

I ovanstående sökkomponent, när komponenten återrenderas, kör React debounce-funktionen. Funktionen skapar en ny timer som håller reda på fördröjningen och den gamla timern sitter i minnet. När tiden har gått ut aktiveras sökfunktionen. Det betyder att sökfunktionen aldrig avstudsas, den är försenad med 500 ms. Denna cykel upprepas vid varje rendering—funktionen skapar en ny timer, den gamla timern går ut och anropar sedan sökfunktionen

För att debounce-funktionen ska fungera behöver du bara anropa den en gång. Du kan göra detta genom att anropa debounce-funktionen utanför komponenten eller genom att med hjälp av memoiseringstekniken. På detta sätt, även om komponenten återrenderas, kommer React inte att köra den igen.

Definiera Debounce-funktionen utanför sökkomponenten

Flytta avstudsa funktion utanför Sök komponent som visas nedan:

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

Nu, i Sök komponent, anrop debouncedSearch och skicka in sökordet.

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ökfunktionen kommer endast att anropas efter fördröjningsperioden.

Memoisera Debounce-funktionen

Memoisering avser att cachelagra resultaten av en funktion och återanvända dem när du anropar funktionen med samma argument.

Att memorera avstudsa funktionen, använd användMemo 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..."
 />
 );
}

Observera att du också har slagit in hanteraSök funktion i en använd Återuppringning koppla för att säkerställa att React bara ringer det en gång. Utan använd Återuppringning krok, skulle React exekvera hanteraSök funktion med varje återrendering gör beroenden av användMemo krokbyte som i sin tur skulle kalla avstudsa fungera.

Nu kommer React bara att ringa till avstudsa funktion om hanteraSök funktion eller fördröjningstiden ändras.

Optimera sökning med Debounce

Ibland kan sakta ner vara bättre för prestanda. När du hanterar sökuppgifter, särskilt med dyra databas- eller API-anrop, är användningen av en debounce-funktion rätt väg att gå. Denna funktion introducerar en fördröjning innan backend-förfrågningar skickas.

Det hjälper till att minska antalet förfrågningar som görs till servern, eftersom den bara skickar förfrågan efter att förseningen har löpt ut och användaren har pausat skrivandet. På så sätt blir inte servern överbelastad med för många förfrågningar, och prestandan förblir effektiv.