Aplicaciones prácticas: búsqueda, desplazamiento y redimensionamiento

En un componente de búsqueda en tiempo real, mantenga dos variables de estado separadas: inputValue para la entrada sin procesar (se actualiza con cada pulsación y mantiene receptivo el campo de entrada) y debouncedQuery, obtenido mediante useDebounce(inputValue, 300) (se actualiza 300 ms después de que se detiene la escritura y desencadena la llamada a la API). Esta separación proporciona una respuesta visual inmediata sin realizar un número excesivo de solicitudes.

Muestre un indicador de carga en cuanto el usuario empiece a escribir, no solo cuando comience la llamada a la API. Establezca isLoading: true siempre que inputValue !== debouncedQuery; estos valores no están sincronizados mientras el debounce está pendiente. Cuando la consulta se estabilice y finalice la obtención de datos, vuelva a establecerlo en false. Así, los usuarios verán un indicador de carga receptivo durante todo el proceso.

Un efecto de paralaje o una barra de progreso de lectura se actualiza según la posición de desplazamiento. Limite el controlador de desplazamiento a un máximo de 60 fps mediante un retraso de 16 ms: const throttledScrollY = useThrottle(scrollY, 16). La interfaz se actualiza con fluidez sin el coste de recalcular la posición con cada píxel del desplazamiento.

Para volver a calcular el diseño al escuchar el cambio de tamaño de la ventana, es mejor utilizar debounce que throttle. El cálculo del diseño solo debe ejecutarse una vez, después de que el usuario termine de cambiar el tamaño. Utilice un debounce de 200 ms para las dimensiones de la ventana. Mientras se arrastra para cambiar el tamaño, la interfaz puede mostrar un estado simplificado; el diseño recalculado aparecerá cuando termine el cambio.

Cuando cambie debouncedQuery, cree un nuevo AbortController y pase su signal a fetch(url, { signal }). Devuelva una función de limpieza que llame a controller.abort(). Esto cancela cualquier solicitud en curso de una consulta anterior cuando llega una nueva consulta después del debounce y evita condiciones de carrera en las que una respuesta anterior y lenta sobrescriba otra posterior y rápida.

Sin AbortController, si el usuario escribe "re", espera y después escribe "react", la segunda consulta podría devolver resultados antes que la primera (por el almacenamiento en caché). Los resultados de búsqueda mostrarían brevemente los resultados de React y después serían sobrescritos por los resultados obsoletos de "re". AbortController evita esto al cancelar por completo la solicitud anterior.

El menú desplegable combina debounce para las llamadas a la API y un estado inmediato para mostrar la entrada. inputValue controla lo que aparece en el campo de texto. useDebounce(inputValue, 250) controla cuándo se ejecuta la obtención de sugerencias. La lista de sugerencias se muestra a partir del estado de los resultados obtenidos, que es independiente de ambos estados de entrada.

La validación asíncrona de formularios, como comprobar si una dirección de correo electrónico ya existe, debe utilizar debounce para evitar saturar el servidor con una solicitud por cada pulsación. Utilice un debounce de 400 ms para el valor del campo y ejecute la solicitud de validación en un useEffect que dependa del valor después del debounce. Muestre un indicador de carga en el campo mientras la validación esté pendiente.

Debounce es ideal para guardar automáticamente el contenido de un formulario mientras el usuario escribe. Establezca un debounce de 1000 ms para el objeto de valores del formulario. Cuando cambie el valor después del debounce, active un guardado en localStorage o en un endpoint de la API. El usuario verá el indicador "Saving..." mientras el debounce esté pendiente y "Saved" cuando finalice la solicitud.

Los valores de retraso son decisiones relacionadas con la experiencia de usuario. Para búsquedas, 200-300 ms ofrecen un equilibrio entre capacidad de respuesta y reducción de solicitudes. Para el cambio de tamaño, 150-200 ms son aceptables porque los usuarios esperan que el diseño se estabilice después de cambiarlo. Para el guardado automático, 1000 ms da tiempo a escribir una frase antes de guardar. Ajuste el valor según la velocidad de interacción prevista.

Las aplicaciones reales suelen necesitar varias optimizaciones simultáneamente. Un editor de documentos podría aplicar debounce al guardado automático (1 s), throttle al cálculo del recuento de palabras (500 ms) y utilizar IntersectionObserver para las analíticas. Estas técnicas se combinan bien porque cada una funciona de forma independiente, con su propio temporizador y ámbito.

¿Por qué debería utilizar AbortController junto con una consulta de búsqueda con debounce?

Utilice useDebounce para las entradas de búsqueda, los controladores de cambio de tamaño y el guardado automático de formularios. Utilice useThrottle para el desplazamiento y el movimiento del ratón. Combine siempre las llamadas a la API con debounce con AbortController para evitar condiciones de carrera. Muestre el estado de carga siempre que inputValue !== debouncedQuery para mantener la interfaz receptiva e informativa.