Implementar el hook personalizado useDebounce

El hook useDebounce acepta un valor y un retraso en milisegundos, y devuelve una versión con Debounce de ese valor: function useDebounce(value, delay). El debouncedValue devuelto queda rezagado con respecto al valor real y solo se actualiza después de que transcurra el retraso especificado sin que se produzca otro cambio.

Dentro del hook, declare una variable de estado: const [debouncedValue, setDebouncedValue] = useState(value). Este estado contiene el último valor confirmado. Comienza siendo igual al valor inicial y solo se actualiza cuando se activa el temporizador de Debounce. Los componentes que leen debouncedValue reciben una entrada estable y consolidada.

La lógica principal reside en un useEffect: cree un temporizador con setTimeout(() => setDebouncedValue(value), delay) y almacene su identificador. El efecto se ejecuta cada vez que cambia value o delay. El temporizador se activa delay milisegundos después del último cambio y actualiza el estado con Debounce.

La función de limpieza de useEffect llama a clearTimeout(timerId). Cuando value cambia antes de que se active el temporizador, React ejecuta la limpieza y cancela la actualización pendiente. Después se programa un temporizador nuevo. Este es el mecanismo clave que permite que Debounce funcione: los cambios rápidos reinician continuamente el temporizador.

La matriz de dependencias de useEffect debe contener [value, delay]. El efecto se vuelve a ejecutar cada vez que cambia el valor de entrada, para programar un temporizador nuevo, y cada vez que cambia delay, por si quien llama al hook ajusta dinámicamente el intervalo de Debounce. Ambos deben incluirse para evitar problemas con cierres obsoletos.

Su uso es sencillo: const debouncedSearch = useDebounce(searchInput, 300). Un useEffect independiente, cuya dependencia sea [debouncedSearch], realiza la llamada a la API. El estado de entrada (searchInput) se actualiza de inmediato para que el campo siga respondiendo; solo la llamada a la API espera a Debounce.

De forma predeterminada, la implementación estándar solo se ejecuta en el extremo final. Para disponer de un modo "inmediato" que llame a la función en el primer desencadenamiento, pero aplique Debounce a las llamadas posteriores, necesita una ref que registre si la llamada ya se ha realizado y la restablezca después del tiempo de espera. Es más complejo, pero resulta útil para los botones de envío.

Haga que el hook sea genérico para garantizar la seguridad de tipos: function useDebounce(value: T, delay: number): T. Esto permite que TypeScript infiera el tipo de debouncedValue a partir del tipo de value. El parámetro genérico T se propaga automáticamente por el estado interno y el tipo devuelto.

Un error frecuente consiste en olvidar devolver la función de limpieza desde useEffect. Sin la limpieza, cada cambio de valor crea un temporizador nuevo, pero nunca cancela el anterior. El resultado es que se activan varios temporizadores y setDebouncedValue se llama varias veces con valores obsoletos, lo que anula por completo Debounce.

Otra opción consiste en almacenar la propia función de Debounce en un useRef mediante lodash. A diferencia del enfoque basado en el estado, el enfoque basado en refs aplica Debounce a callbacks (funciones), no a valores. Use el hook basado en el estado cuando necesite un valor derivado; use el enfoque basado en callbacks cuando necesite aplicar Debounce a un manejador de eventos.

Verifique que el hook funciona añadiendo un registro en la consola dentro del callback del temporizador y observando la consola del navegador mientras escribe rápidamente. Debería ver un registro por cada evento de "detención", no uno por cada pulsación de tecla. Durante una escritura rápida, el número de registros debería ser mucho menor que el número de pulsaciones.

¿Por qué el useEffect de useDebounce debe devolver una función de limpieza que llame a clearTimeout?

El hook useDebounce(value, delay) mantiene un estado con Debounce que solo se actualiza después de delay ms de silencio. Su useEffect establece un temporizador y lo limpia al ejecutar la limpieza para cancelar los temporizadores obsoletos. Use el valor con Debounce como dependencia de los efectos que realizan solicitudes a la API. Añada un tipo genérico de TypeScript para garantizar una seguridad de tipos completa.