Original article: Debouncing in React – How to Delay a JS Function
Hay algunas tareas pesadas en el desarrollo de software. Llamar a una API por ejemplo. Supongamos que tenemos una API que busca una lista de usuarios, y no podemos darnos el lujo de dispararlo frecuentemente. Queremos buscar solamente cuando hemos escrito toda la petición completa.
Bueno, debouncing es una práctica en el desarrollo de software lo cual se asegura de que ciertas tareas pesadas como el de arriba no se dispare frecuentemente.
Cuando usar Debouncing
Entendamos esto con un ejemplo. Supongamos que tenemos un elemento input que recibe algunos datos cuando escribimos algo. Por ejemplo, digamos que escribimos un código pin y regresa algunos datos.
Pero hay una trampa aquí. Digamos que nuestro código pin es 800001. Si escribimos el primer carácter, que es 8, enviaremos la petición al servidor backend. Luego escribimos 0, y enviaremos otra petición al servidor, y así sucesivamente.
Esto llama a la API demasiadas veces, y a la vez abusa de las peticiones. Así que, para prevenir esto, usamos algo llamado una función debounce.
Así que para alcanzar esto, tenemos una característica en JavaScript llamada Debouncing.
Debouncing en JavaScript: un Ejemplo Práctico
En el ejemplo de abajo, estamos simplemente llamando a una API usando el método axios.get cuando escribimos cualquier carácter numérico en la caja input.
El carácter input se pasa a la función como un argumento y estamos pasando el valor como parámetros de ruta. Estamos también mostrando la respuesta en la consola.
import axios from "axios";
import React from "react";
import "./styles.css";
export default function App() {
const setInput = (value) => {
axios
.get(`https://api.postalpincode.in/pincode/${value}`)
.then((response) => {
console.log(response.data[0]?.PostOffice[0]);
});
};
return (
<div className="app">
<input
placeholder="Search Input.."
onChange={(e) => setInput(e.target.value)}
/>
</div>
);
}
Pero la trampa aquí es, cada vez que escribimos un carácter, nuestra API se disparará. Así que volviendo a nuestro ejemplo de arriba, digamos que queremos escribir 800001. De nuevo, tan pronto como escribamos 8, la API se disparará y buscará el carácter 8. Luego escribimos 0 (cero), y la API buscará 80, y así sucesivamente.
Ahora, cambiemos todo el flujo para agregar debouncing. En el caso de Debouncing, la API disparará solamente una vez después de 2 segundos, luego escribimos todo el código pin.
Primero, ante todo, crear un estado usando el hook useState en React.
const [pinCode, setPinCode] = React.useState("");Ahora, necesitamos poner los datos en el estado pinCode cuando escribimos algo, usando el evento controlador onChange.
<input
placeholder="Search Input.."
onChange={(event) => setPinCode(event.target.value)}
/>Ahora, tengamos un Hook useEffect que se ejecutará cada vez que nuestro código pin cambie, o cuando escribamos algo en el input de búsqueda.
React.useEffect(() => {
}, [pinCode])En este hook useEffect, tendremos una función llamada getData. Esta función getData tendrá una función callback llamado setTimeOut. Y pondremos el temporizador a 2 segundos.
React.useEffect(() => {
const getData = setTimeout(() => {
}, 2000)
}, [pinCode])Y ahora, en esta función getData, llamemos a nuestra API.
React.useEffect(() => {
const getData = setTimeout(() => {
axios
.get(`https://api.postalpincode.in/pincode/${pinCode}`)
.then((response) => {
console.log(response.data[0]);
});
}, 2000)
}, [pinCode])También necesitaremos destruir la instancia del hook useEffect usando return, seguido por clearTimeout, cada vez que termine.
React.useEffect(() => {
const getData = setTimeout(() => {
axios
.get(`https://api.postalpincode.in/pincode/${pinCode}`)
.then((response) => {
console.log(response.data[0]);
});
}, 2000)
return () => clearTimeout(getData)
}, [pinCode])Y terminamos. Escribamos algo en el input, y después de 2 segundo tendremos nuestros resultados.
¡Y ahí lo tienes!
Concluyendo
Ahora sabes cómo y por qué usar la función debounce. Tan simple y fácil, ¿no?
Ahora, si escribimos cualquier petición de búsqueda en el input, se mostrará después de 2 segundos solo cuando dejemos de cambiar el input. Y usamos debouncing para hacer esto.
Hay múltiples aplicaciones de debouncing. Podemos usarlo para evitar que nuestra API sea llamada una y otra vez. Y podemos usarlo para asegurarnos que los datos del formulario se manden solamente una vez, inclusive si hacemos clic múltiples veces al botón de submit.
También puedes revisar mi video en Youtube Función Debounce de React en 100 Segundos - Retrasar una función en React.
Obtén el código aquí.
Feliz aprendizaje