Aplicaciones como Facebook, TikTok, Instagram, han popularizado la idea de un feed que nunca termina, es infinito. La forma en cómo funciona es que inicialmente se cargan en una lista, los primeros registros a mostrar y conforme el usuario se acerca al fin de la página, se cargan nuevos datos.

Por experiencia propia, quizás te recuerdes navegando de arriba a abajo por varios minutos u horas en una de estas aplicaciones. En ese tiempo, la aplicación ha comunicado muchísimas publicaciones entre tu computadora y el servidor de datos, toda esta información es visible en porciones, dependiendo de si haces scroll hacia abajo o hacia arriba en la página, por lo que se deben implementar estrategias para cuidar el rendimiento, sin afectar la experiencia de usuario.

Uno de los patrones existentes para manejar listas grandes en un control de scroll infinito, es guardar de manera virtual los elementos de la lista que no se ven, y mostrar únicamente los que están en el área visible. Sistemas de UI como el de Android o iOs, implementan esta característica de manera nativa, sin embargo, para la web es necesario hacer este trabajo.

El resultado de no implementar una estrategia como la mencionada, es una página llena de nodos del DOM, la gran mayoría de ellos no visibles, que terminan por alentar la página y el dispositivo en general. Ya que el navegador debe tener control de todos estos nodos aún cuando no están visibles.

Decimos que virtualizamos una lista de scroll infinito, cuando almacenamos en una estructura como un arreglo, la información y los elementos de cada fila de la lista, traduciendo a nodos del DOM, sólo aquellas filas que están en la porción visible del scroll, y manteniendo en memoria virtual aquellos que no.

Conforme el usuario se mueve en la página, los nodos del DOM existentes se sustituyen por las filas que deberían aparecer visibles.

Todo esto implica un enorme trabajo de coordinación, cálculo de distancias y medidas, reemplazo eficiente de nodos y mucho más. Implementar una estrategia como ésta por cuenta propia, puede ser un trabajo muy propenso a errores.

Afortunadamente, existen soluciones Open Source disponibles, para el caso de React, existe React Virtualize, React lazyload, React Infinite, etc. en el resto de éste bloque, usaremos React Virtualize en la implementación de scroll infinito.

Continuemos.