Cómo mejorar el rendimiento de la búsqueda en React con antirrebote

En React, al implementar la función de búsqueda, el controlador onChange llama a la función de búsqueda cada vez que el usuario escribe dentro del cuadro de entrada. Este enfoque puede causar problemas de rendimiento, especialmente si se realizan llamadas a la API o se consulta la base de datos. Las llamadas frecuentes a la función de búsqueda pueden sobrecargar el servidor web, provocando fallas o una interfaz de usuario que no responde. El rebote resuelve este problema.

¿Qué es el rebote?

Normalmente, implementas la funcionalidad de búsqueda en React llamando a una función de controlador onChange en cada pulsación de tecla, como se muestra a continuación:

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();
 };





instagram viewer
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Si bien esto funciona, la llamada al backend para actualizar los resultados de búsqueda cada vez que se presiona una tecla puede resultar costosa. Por ejemplo, si estuviera buscando "webdev", la aplicación enviaría una solicitud al backend con los valores "w", "nosotros", "web", etc.

El rebote es una técnica que funciona retrasando la ejecución de una función hasta que haya transcurrido un período de retraso. La función antirrebote detecta cada vez que el usuario escribe y evita la llamada al controlador de búsqueda hasta que haya transcurrido el retraso. Si el usuario continúa escribiendo dentro del período de retraso, el temporizador se reinicia y React llama a la función nuevamente para el nuevo retraso. Este proceso continúa hasta que el usuario deja de escribir.

Al esperar a que los usuarios dejen de escribir, la eliminación de rebotes garantiza que su aplicación realice solo las solicitudes de búsqueda necesarias, reduciendo así la carga del servidor.

Cómo rechazar la búsqueda en React

Hay varias bibliotecas que puede utilizar para implementar el rebote. También puede optar por implementarlo usted mismo desde cero utilizando JavaScript. establecer tiempo de espera y borrar tiempo de espera funciones.

Este artículo utiliza la función antirrebote de la biblioteca lodash.

Suponiendo que tiene un proyecto React listo, cree un nuevo componente llamado Buscar. Si no tiene un proyecto en funcionamiento, cree una aplicación React usando el crear la utilidad de la aplicación React.

En el Buscar archivo de componente, copie el siguiente código para crear un cuadro de entrada de búsqueda que llame a una función de controlador en cada pulsación de tecla.

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

Para rebotar el manejarBuscar función, pásala al rebote función de 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..."
 />
 );
}

En el rebote función, está pasando la función que desea retrasar, es decir, la manejarBuscar función y el tiempo de retardo en milisegundos, es decir, 500 ms.

Si bien el código anterior debería retrasar la llamada al manejarBuscar solicitud hasta que el usuario deje de escribir, no funciona en React. Explicaremos por qué en la siguiente sección.

Antirrebote y renderizados

Esta aplicación utiliza una entrada controlada. Esto significa que el valor del estado controla el valor de la entrada; Cada vez que un usuario escribe en el campo de búsqueda, React actualiza el estado.

En React, cuando cambia un valor de estado, React vuelve a representar el componente y ejecuta todas las funciones dentro de él.

En el componente de búsqueda anterior, cuando el componente se vuelve a renderizar, React ejecuta la función antirrebote. La función crea un nuevo temporizador que realiza un seguimiento del retraso y el temporizador anterior se guarda en la memoria. Cuando transcurre el tiempo, activa la función de búsqueda. Esto significa que la función de búsqueda nunca es rechazada, sino que se retrasa 500 ms. Este ciclo se repite en cada renderizado: la función crea un nuevo temporizador, el temporizador anterior expira y luego llama a la función de búsqueda.

Para que la función antirrebote funcione, debes llamarla solo una vez. Puede hacer esto llamando a la función antirrebote fuera del componente o utilizando la técnica de la memorización. De esta manera, incluso si el componente se vuelve a renderizar, React no lo ejecutará nuevamente.

Definición de la función antirrebote fuera del componente de búsqueda

Mueve el rebote funcionar fuera del Buscar componente como se muestra a continuación:

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

Ahora, en el Buscar componente, llamada rebotadoBuscar y pase el término de búsqueda.

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 función de búsqueda sólo se llamará una vez transcurrido el período de retraso.

Memorizar la función antirrebote

Memorizar se refiere a almacenar en caché los resultados de una función y reutilizarlos cuando llamas a la función con los mismos argumentos.

para memorizar el rebote función, utilice el utilizarMemoria gancho.

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

Tenga en cuenta que también ha envuelto el manejarBuscar funcionar en un utilizarDevolución de llamada gancho para garantizar que React solo lo llame una vez. Sin el utilizarDevolución de llamada gancho, React ejecutaría el manejarBuscar funcionar con cada repetición haciendo que las dependencias del utilizarMemoria cambio de anzuelo que a su vez llamaría al rebote función.

Ahora, React solo llamará al rebote funcionar si el manejarBuscar función o el tiempo de retardo cambia.

Optimice la búsqueda con antirrebote

A veces, reducir la velocidad puede ser mejor para el rendimiento. Al manejar tareas de búsqueda, especialmente con costosas llamadas a bases de datos o API, el camino a seguir es utilizar una función antirrebote. Esta función introduce un retraso antes de enviar solicitudes de backend.

Ayuda a reducir la cantidad de solicitudes realizadas al servidor, ya que solo envía la solicitud después de que ha transcurrido el retraso y el usuario ha dejado de escribir. De esta manera, el servidor no se sobrecarga con demasiadas solicitudes y el rendimiento sigue siendo eficiente.