Por qué importan debounce y throttle en las interfaces

Algunos eventos del DOM se producen con una frecuencia extremadamente alta. El evento keypress se produce con cada pulsación de tecla. El evento scroll se produce decenas de veces por segundo mientras se desplaza. El evento resize se produce continuamente mientras el usuario arrastra el borde de la ventana. Procesar cada evento de forma individual puede sobrecargar tanto el navegador como el servidor.

Si el manejador de keypress realiza una llamada a una API con cada pulsación de tecla, un usuario que escriba "React hooks" (11 caracteres) desencadena 11 solicitudes de red, la mayoría correspondientes a consultas incompletas. Del mismo modo, actualizar una animación de paralaje con cada píxel de desplazamiento provoca cientos de nuevos renderizados de React por segundo. Esto desperdicia CPU, red y batería.

Debounce retrasa la ejecución hasta que el evento deja de producirse durante un periodo especificado. Si el usuario sigue escribiendo, el temporizador se reinicia con cada pulsación de tecla. Solo después de N milisegundos de silencio se ejecuta finalmente el manejador una vez. Debounce responde a la pregunta: "ejecute esto cuando el usuario termine de hacer algo".

Throttle limita la ejecución a como máximo una vez por intervalo de tiempo, independientemente de cuántos eventos se produzcan. Si el usuario se desplaza rápidamente, un throttle de 100 ms garantiza que el manejador se ejecute como máximo 10 veces por segundo. Throttle responde a la pregunta: "ejecute esto periódicamente, pero no con una frecuencia superior a una vez cada N ms".

Debounce es la opción adecuada cuando solo le interesa el valor final después de que el usuario se detenga. Casos clásicos: un campo de búsqueda (enviar la solicitud a la API cuando el usuario deje de escribir), el manejador de redimensionamiento de la ventana (recalcular el diseño cuando termine el redimensionamiento) y la validación de un campo de formulario que consulta un servidor (esperar a que se introduzca todo el valor antes de validar).

Throttle es la opción adecuada cuando desea actualizaciones periódicas durante una actividad continua. Casos clásicos: un manejador de la posición de desplazamiento (actualizar una barra de progreso de lectura o un encabezado fijo como máximo a 30 fps), el seguimiento del movimiento del ratón (registrar la posición del cursor para la analítica) y los manejadores de eventos de arrastre (actualizar suavemente la posición de un elemento arrastrable sin saturar el sistema).

Escribir Debounce o Throttle desde cero sin comprenderlos completamente puede provocar errores, como perder el evento final (trailing edge), ejecutarse en el extremo incorrecto o no limpiar los temporizadores cuando se desmonta el componente. Por lo general, es mejor usar implementaciones ampliamente probadas de bibliotecas como lodash, que gestionan correctamente todos los casos límite.

Lodash proporciona _.debounce(fn, wait) y _.throttle(fn, wait), con opciones para controlar el comportamiento en el extremo inicial y final. La función devuelta tiene un método .cancel() para cancelar una invocación pendiente y un método .flush() para ejecutarla de inmediato. En React, estas funciones deben envolverse en useRef para evitar que se creen de nuevo en cada renderizado.

Incluso 50 nuevos renderizados adicionales de React por segundo debido a un manejador de desplazamiento sin throttle pueden consumir una cantidad considerable de CPU, especialmente en dispositivos móviles de gama baja. Un presupuesto de 16 ms por fotograma (60 fps) significa que cada nuevo renderizado debe completarse en menos de 16 milisegundos para evitar saltos de fotogramas. Debounce y Throttle son su primera línea de defensa frente a los problemas de velocidad de fotogramas.

No todos los manejadores de alta frecuencia necesitan Debounce. Si el manejador de eventos solo lee un valor sin actualizar el estado ni llamar a APIs —por ejemplo, si registra la última posición del ratón en una ref—, no se necesita Debounce. Aplique Debounce o Throttle únicamente a los manejadores que desencadenen operaciones costosas: actualizaciones de estado, llamadas a APIs o mediciones del DOM.

Cuando un componente se desmonta, debe cancelarse cualquier llamada pendiente con Debounce para evitar una actualización de estado después del desmontaje. Si usa un useRef para almacenar la función con Debounce, llame a debouncedFn.cancel() en la limpieza de useEffect. Las funciones con Debounce de Lodash exponen este método precisamente para este propósito.

¿Qué técnica debe usar para realizar una llamada a una API cuando el usuario deje de escribir en un campo de búsqueda?

Los eventos de alta frecuencia, como keypress, scroll y resize, pueden causar problemas de rendimiento si los manejadores se ejecutan con cada evento. Debounce espera a que haya silencio y es adecuado para los campos de búsqueda y los manejadores de redimensionamiento. Throttle limita la frecuencia y es adecuado para el desplazamiento y el arrastre. Use las implementaciones de lodash almacenadas en refs y cancélelas siempre cuando se desmonte el componente.