Implementar el hook personalizado useThrottle

Debounce simplemente reinicia un temporizador con cada evento. Throttle debe registrar activamente cuándo se produjo la última ejecución y decidir si ha transcurrido suficiente tiempo para realizar otra. Esto requiere conservar una marca de tiempo entre renderizados, por lo que la implementación es algo más compleja que la de Debounce.

La marca de tiempo de la última ejecución debe conservarse entre renderizados sin provocar nuevos renderizados, por lo que useRef es la herramienta adecuada. Almacene la marca de tiempo como const lastRunTime = useRef(Date.now()). A diferencia del estado, actualizar una ref no provoca un nuevo renderizado, por lo que la lógica de Throttle se ejecuta eficientemente sin ciclos adicionales.

El hook useThrottle(value, delay) devuelve una versión con Throttle del valor de entrada. Su contrato es similar al de useDebounce: acepta cualquier valor y un retraso en ms, y devuelve el valor con Throttle. Los componentes lo usan de la misma forma, por lo que constituye una alternativa de sustitución directa para otras semánticas temporales.

Un throttle de trailing actualiza el valor al final de cada intervalo. Cuando llega un valor nuevo, programe un setTimeout para el tiempo restante del intervalo: delay - (Date.now() - lastRunTime.current). Cuando se ejecute el temporizador, actualice el estado y registre el nuevo lastRunTime. Cancele los temporizadores anteriores en la función de limpieza.

Un throttle de leading aplica el primer valor de inmediato e ignora los siguientes hasta que vence el intervalo. Compruebe si Date.now() - lastRunTime.current >= delay; si es así, actualice el estado y registre el momento. De lo contrario, omita la actualización. Esto proporciona una respuesta inmediata a la primera acción, seguida de un periodo de espera.

La mejor experiencia de usuario suele combinar ambos enfoques: responder de inmediato al primer evento (leading) y asegurarse después de que el estado final también se aplique al terminar el intervalo (trailing). Así, el usuario percibe una respuesta inicial rápida y el valor final siempre se aplica cuando cesa el movimiento, lo que evita que el estado final quede obsoleto.

Guarde el ID del temporizador pendiente en un useRef: const timeoutRef = useRef(null). Antes de programar un temporizador nuevo, llame a clearTimeout(timeoutRef.current) para cancelar cualquier temporizador existente. Esto evita que haya varios temporizadores superpuestos, lo que provocaría varias actualizaciones dentro de un mismo intervalo de throttle.

La función de limpieza de useEffect debe llamar a clearTimeout(timeoutRef.current) para cancelar cualquier actualización trailing pendiente cuando el componente se desmonte. De lo contrario, un temporizador pendiente se ejecutará después del desmontaje e intentará actualizar el estado de un componente desmontado, lo que puede provocar advertencias de React.

En lugar de un hook basado en valores, puede crear un hook de throttle basado en useCallback: useThrottledCallback(fn, delay) devuelve una versión limitada de una función. Esta opción es más flexible cuando lo que desea limitar es una llamada a una función, como la de un rastreador de analíticas, en lugar de un valor reactivo.

En las pruebas de Jest, use jest.useFakeTimers() para controlar el tiempo. Configure un throttle con un retraso de 1000 ms, genere 10 cambios rápidos de valor, avance después el tiempo simulado 500 ms y compruebe que solo se hayan producido 1 o 2 actualizaciones. Avance otros 500 ms y verifique que se ejecute la actualización trailing. Así validará el comportamiento del throttle de forma determinista.

React procesa las actualizaciones de estado en lotes durante los renderizados. Un throttle que opera sobre actualizaciones de estado funciona correctamente dentro de este modelo. Sin embargo, tenga en cuenta que, en React 18 Concurrent Mode, los renderizados pueden interrumpirse. La lógica del throttle, basada en el tiempo real del reloj mediante Date.now(), no se ve afectada por la planificación de React.

¿En qué borde se ejecuta un throttle «trailing»?

Throttle requiere controlar el momento de la última ejecución con useRef. El hook puede implementar el borde leading (inmediato), el borde trailing (diferido) o ambos. Guarde siempre el ID del temporizador en un ref y cancélelo en la función de limpieza. Para casos de uso basados en funciones, prefiera el patrón useThrottledCallback. Use temporizadores simulados en las pruebas para obtener resultados fiables.