Come migliorare le prestazioni di ricerca in React With Debouncing

In React, quando si implementa la funzionalità di ricerca, il gestore onChange chiama la funzione di ricerca ogni volta che l'utente digita nella casella di input. Questo approccio può causare problemi di prestazioni, soprattutto se si effettuano chiamate API o si eseguono query sul database. Le chiamate frequenti alla funzione di ricerca possono sovraccaricare il server Web, causando arresti anomali o la mancata risposta dell'interfaccia utente. Il debouncing risolve questo problema.

Cos'è il debouncing?

In genere, implementi la funzionalità di ricerca in React chiamando una funzione del gestore onChange ad ogni pressione di un tasto, come mostrato di seguito:

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };





instagram viewer

const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Sebbene funzioni, la chiamata al backend per aggiornare i risultati della ricerca ad ogni pressione di un tasto può diventare costosa. Ad esempio, se stavi cercando "webdev", l'applicazione invierebbe una richiesta al backend con i valori "w", "noi", "web" e così via.

Il debouncing è una tecnica che funziona ritardando l'esecuzione di una funzione fino allo scadere di un periodo di ritardo. La funzione antirimbalzo rileva ogni volta che l'utente digita e impedisce la chiamata al gestore di ricerca fino allo scadere del ritardo. Se l'utente continua a digitare entro il periodo di ritardo, il timer viene ripristinato e React richiama nuovamente la funzione per il nuovo ritardo. Questo processo continua finché l'utente non interrompe la digitazione.

Attendendo che gli utenti interrompano la digitazione, il debouncing garantisce che l'applicazione effettui solo le richieste di ricerca necessarie riducendo così il carico del server.

Come eliminare la ricerca in React

Esistono diverse librerie che è possibile utilizzare per implementare il antirimbalzo. Puoi anche scegliere di implementarlo da zero utilizzando JavaScript setTimeout E clearTimeout funzioni.

Questo articolo utilizza la funzione antirimbalzo da la biblioteca di lodash.

Supponendo che tu abbia un progetto React pronto, crea un nuovo componente chiamato Ricerca. Se non hai un progetto funzionante, crea un'app React utilizzando il file creare l'utilità dell'app React.

Nel Ricerca componente, copiare il codice seguente per creare una casella di input di ricerca che richiama una funzione del gestore a ogni pressione di un tasto.

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

Per rimbalzare il handleSearch funzione, passalo a rimbalzare funzione da 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..."
 />
 );
}

Nel rimbalzare funzione, stai passando la funzione che vuoi ritardare, ovvero il handleSearch funzione e il tempo di ritardo in millisecondi, ovvero 500 ms.

Mentre il codice sopra dovrebbe ritardare la chiamata al handleSearch request finché l'utente non interrompe la digitazione, non funziona in React. Spiegheremo perché nella sezione seguente.

Debouncing e Rerender

Questa applicazione utilizza un ingresso controllato. Ciò significa che il valore dello stato controlla il valore dell'input; ogni volta che un utente digita nel campo di ricerca React aggiorna lo stato.

In React, quando il valore di uno stato cambia, React esegue nuovamente il rendering del componente ed esegue tutte le funzioni al suo interno.

Nel componente di ricerca sopra, quando il componente viene nuovamente renderizzato, React esegue la funzione antirimbalzo. La funzione crea un nuovo timer che tiene traccia del ritardo e il vecchio timer rimane in memoria. Allo scadere del tempo, attiva la funzione di ricerca. Ciò significa che la funzione di ricerca non viene mai rimbalzata, ma ritardata di 500 ms. Questo ciclo si ripete ad ogni rendering: la funzione crea un nuovo timer, il vecchio timer scade e quindi chiama la funzione di ricerca

Perché la funzione antirimbalzo funzioni, è necessario chiamarla una sola volta. Puoi farlo chiamando la funzione antirimbalzo all'esterno del componente o by utilizzando la tecnica della memorizzazione. In questo modo, anche se il componente viene nuovamente renderizzato, React non lo eseguirà nuovamente.

Definizione della funzione antirimbalzo all'esterno del componente di ricerca

Muovi il rimbalzare funzione al di fuori di Ricerca componente come mostrato di seguito:

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

Ora, nel Ricerca componente, chiamata rimbalzatoCerca e passa il termine di ricerca.

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

La funzione di ricerca verrà richiamata solo allo scadere del periodo di ritardo.

Memorizzazione della funzione antirimbalzo

La memorizzazione si riferisce alla memorizzazione nella cache dei risultati di una funzione e al loro riutilizzo quando si chiama la funzione con gli stessi argomenti.

Per memorizzare il rimbalzare funzione, utilizzare la funzione utilizzareMemo gancio.

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

Nota che hai anche avvolto il file handleSearch funzione in a utilizzare Callback hook per garantire che React lo chiami solo una volta. Senza il utilizzare Callback hook, React eseguirebbe il comando handleSearch funzione con ogni nuovo rendering che crea le dipendenze di utilizzareMemo hook change che a sua volta chiamerebbe the rimbalzare funzione.

Ora, React chiamerà solo il file rimbalzare funzione se il handleSearch funzione o il tempo di ritardo cambia.

Ottimizza la ricerca con Debounce

A volte, rallentare può essere migliore per le prestazioni. Quando si gestiscono attività di ricerca, in particolare con database costosi o chiamate API, utilizzare una funzione antirimbalzo è la strada da percorrere. Questa funzione introduce un ritardo prima dell'invio delle richieste di backend.

Aiuta a ridurre il numero di richieste effettuate al server, poiché invia la richiesta solo dopo che è trascorso il ritardo e l'utente ha interrotto la digitazione. In questo modo il server non viene sovraccaricato da troppe richieste e le prestazioni rimangono efficienti.