Debounce y Throttle

Debounce y throttle son dos palabras que solo con escucharlas meten miedo. Suena a algún tipo de tecnología criptica pensada solo para 10x engineers pero la realidad es que en realidad son conceptos bastante amigables una vez que los bajamos al español.

Arranquemos pensando en una de las cosas mas utilizadas por todo el mundo, los autocomplete. Para quien no lo sepa, un autocomplete es un cuadro de texto que en base a lo que vamos tipeando nos va recomendando resultados. Algunos ejemplos son Google o la barra de busqueda de Mercadolibre o Amazon.

Imaginemos que vamos a buscar "Play station 5". Si nosotros hacemos una llamada a nuestra API por cada presión de tecla, en este caso estaríamos haciendo 14 llamadas a la API en un lapso aproximado de 1 segundo. Ahora pensemos que hay 10 personas en el mismo momento haciendo exactamente la misma búsqueda, eso daría 140 llamadas a la API en un lapso de un minuto. Suena un poco mucho solamente para manejar 10 ¿no?

Acá es donde entran en juego Debounce y throttle que su meta va a ser ayudarnos a bajar este número de requests utilizando distintas mecánicas.

Debounce

La idea detrás de Debounce es que se ejecute una función SI Y SOLO SI paso una determinada cantidad de tiempo sin que se ejecute una acción. Si volvemos a nuestro ejemplo del buscador, la acción seria la presión de una tecla y la función sería nuestra llamada HTTP para obtener la información solicitada. Por ende mientras que el usuario este presionando teclas con un intervalo menor a X, no vamos a ejecutar nuestro HTTP request y al momento que el usuario termine de tipear, se va a disparar esa llamada. Teniendo esto en cuanta nuestra búsqueda "Play station 5" dispararía una sola llamada a la API en lugar de 14 (siempre y cuando el usuario tipee a una velocidad mayor que el intervalo que hayamos definido).

Ahora bien, ¿Cómo hacemos para escribir el código de tal manera que ese debounce se aplique? Un ejemplo utilizando un custom hook en React sería el siguiente:

Custom hook

Componente

Throttle

Por otro lado, throttle tiene una mecánica similar pero no exactamente igual. La idea es que vos puedas hacer una request cada una determinada cantidad de tiempo mientras que el usuario este accionando. Eso quiere decir que en nuestro ejemplo podríamos indicar que se haga una request cada 300ms por lo que si tardamos un 1 segundo en escribir vamos a haber hecho 3 requests. Se vería algo así:

La implementación en nuestra aplicación React es similar a la de debounce pero en este caso no recibimos el intervalo que tiene que pasar entre las acciones, sino que vamos a calcular cuanto tiempo paso desde la última acción para ver si corresponde actualizar nuestro valor.

Custom hook

Componente

Si te gusto este contenido, podes seguirme en mi Twitter y Youtube en donde subo contenido regularmente.