Combinación de virtualización y obtención de datos

El scroll infinito carga más datos cuando el usuario se acerca al final de la lista, en lugar de utilizar una paginación con botones de página explícitos. Combinado con la virtualización, permite explorar grandes conjuntos de datos con fluidez.

La lista muestra únicamente las filas visibles mientras los nuevos datos se obtienen en segundo plano, justo antes de que el usuario llegue al final.

Los componentes de lista de react-window aceptan un callback onItemsRendered que informa de qué índices de elementos se están renderizando. Proporciona los índices de inicio y final visibles y los de overscan.

Este callback es su punto de conexión con el desplazamiento y le permite detectar hasta dónde ha desplazado el usuario la lista sin conectar eventos de desplazamiento sin procesar.

Para saber cuándo obtener datos, compare overscanStopIndex de onItemsRendered con el itemCount actual. Cuando la ventana renderizada se acerca al final de los datos cargados, se necesitan más datos.

Usar el índice de final de overscan proporciona un pequeño margen de anticipación y activa la obtención ligeramente antes de que el usuario llegue a la última fila.

Cuando el índice de final supera un umbral, por ejemplo, cuando queda una pantalla de distancia respecto a itemCount, llame a la función de obtención de la página siguiente. Protéjala para no lanzar varias solicitudes simultáneas.

Un indicador de carga o comprobar si ya hay una obtención en curso evita solicitudes duplicadas mientras el usuario se desplaza por la zona de activación.

Un recurso sencillo consiste en renderizar itemCount como el número de elementos cargados más uno mientras haya más datos disponibles. La fila adicional muestra un indicador de carga para señalar que la obtención está en curso.

Cuando llegan datos nuevos, el recuento aumenta y la fila del indicador se sustituye por contenido real, lo que proporciona una respuesta visual fluida.

El paquete complementario react-window-infinite-loader se encarga de esta lógica. Proporcione isItemLoaded, loadMoreItems e itemCount, y llamará a su cargador mientras el usuario se desplaza hacia filas que aún no se han cargado.

Gestiona el registro de qué rangos están cargados y evita llamadas de carga redundantes, lo que simplifica la implementación de un scroll infinito sólido.

Para los índices que aún no se han cargado, puede renderizar filas de marcador de posición o skeletons en lugar de dejarlos en blanco. La función de renderizado comprueba si el elemento de un índice está cargado y muestra un skeleton si no lo está.

Los skeletons conservan el diseño y comunican el progreso, lo que resulta mejor que mostrar un espacio vacío mientras llega la página siguiente.

Las obtenciones pueden fallar, así que debe gestionar los errores correctamente. Puede renderizar al final una fila de error especial con un botón de reintento que vuelva a invocar la función de carga para el rango que falló.

Esto mantiene la lista utilizable después de un contratiempo y ofrece al usuario una forma clara de recuperarse sin volver a cargar toda la página.

Dos estilos habituales de paginación alimentan las listas infinitas. La paginación por offset solicita datos mediante un número de página o una cantidad de elementos omitidos, mientras que la paginación por cursor solicita los elementos posteriores a un cursor opaco que apunta al último elemento visto.

La paginación por cursor suele ser más fiable para datos activos y cambiantes porque evita los desplazamientos y duplicados que los offsets pueden provocar cuando se insertan elementos.

React Query useInfiniteQuery se combina de forma natural con la virtualización. Gestiona las páginas obtenidas, el cursor siguiente y los estados de carga y error, mientras react-window renderiza las páginas aplanadas de forma eficiente.

Aplane las páginas en una sola matriz para la lista y llame a fetchNextPage desde el umbral de onItemsRendered; así obtiene almacenamiento en caché y reintentos sin coste adicional.

Identifique cuándo obtener más datos en una lista infinita virtualizada.

El scroll infinito carga páginas cuando el usuario se acerca al final. onItemsRendered informa de los índices y comparar overscanStopIndex con itemCount indica cuándo obtener más datos, evitando las solicitudes duplicadas.

Utilice filas de marcador de posición y de error, react-window-infinite-loader para gestionar el registro y la paginación por cursor para los datos activos. React Query useInfiniteQuery gestiona las páginas, los cursores y los estados junto con el renderizado de react-window.