El problema de renderizar listas grandes

Suponga que recorre un array de diez mil elementos y renderiza un li para cada uno. React creará diligentemente diez mil nodos del DOM, aunque en la pantalla solo quepan unas pocas docenas a la vez.

La mayoría de esos nodos están fuera de la pantalla y son invisibles, pero el navegador debe crearlos, calcular su diseño y mantenerlos todos.

Los árboles DOM grandes tienen un coste real para el navegador. El diseño, el recálculo de estilos y la memoria aumentan con el número de nodos, por lo que una lista enorme ralentiza el renderizado inicial e incrementa el uso de memoria.

Incluso las interacciones sencillas pueden entrecortarse cuando el motor tiene que controlar y volver a calcular el diseño de decenas de miles de nodos.

El desplazamiento por una lista enorme es donde los usuarios notan más el problema. El navegador vuelve a pintar y puede recalcular el diseño a medida que se mueve el contenido; con demasiados nodos, la velocidad de fotogramas cae por debajo de un nivel fluido.

El resultado es un desplazamiento entrecortado y lento que hace que la interfaz parezca que no responde, independientemente de lo rápida que sea el resto de la aplicación.

Puede confirmar el problema en el panel Memory de las DevTools del navegador, que informa del número de nodos DOM de la página. Una lista que crea miles de nodos se muestra claramente allí.

Observar cómo aumenta esa cifra a medida que renderiza más elementos le proporciona pruebas concretas de que el tamaño del DOM es el cuello de botella.

La virtualización, a veces denominada windowing, renderiza únicamente los elementos visibles en ese momento y un pequeño búfer, en lugar de la lista completa. A medida que se desplaza, se montan los elementos que entran en la vista y se desmontan los que salen.

Así, el DOM activo se mantiene reducido independientemente del número de elementos que contengan los datos, separando el tamaño del DOM del tamaño del conjunto de datos.

La ventana visible se obtiene a partir de la posición de desplazamiento, la altura del contenedor y la altura de los elementos. Al dividir la altura de la ventana gráfica entre la altura de un elemento se obtiene aproximadamente cuántas filas caben, y el desplazamiento indica cuáles son.

La biblioteca utiliza estos valores para decidir exactamente qué parte de los elementos debe renderizar en cada momento.

Varias bibliotecas implementan windowing. react-virtualized ofrece muchas funcionalidades, pero es más grande; react-window es una reescritura más pequeña y enfocada del mismo autor; y TanStack Virtual es una opción moderna sin interfaz incorporada.

Para la mayoría de las listas, react-window ofrece un equilibrio excelente entre sencillez y rendimiento, por lo que este curso se centra en ella.

La virtualización resulta útil cuando las listas son largas, aproximadamente de varios cientos de filas o más, o cuando las filas contienen muchas imágenes y componentes anidados. En esos casos, el tamaño del DOM afecta realmente al rendimiento.

Los feeds infinitos, las tablas de datos grandes y los historiales de chat son situaciones habituales en las que el windowing pasa de ser opcional a resultar esencial.

Para listas cortas de unas pocas docenas de elementos sencillos, la virtualización añade complejidad sin ofrecer un beneficio significativo. La sobrecarga del posicionamiento absoluto y de las mediciones incluso puede empeorar el rendimiento general.

Reserve el windowing para conjuntos de datos realmente grandes; para los pequeños, un map normal es más sencillo y suficientemente rápido.

Con el windowing, una lista de cien mil elementos mantiene en el DOM solo los pocos elementos visibles, por lo que el renderizado inicial es rápido, el uso de memoria se mantiene bajo y el desplazamiento es fluido.

A cambio de un poco de complejidad en la configuración, obtiene un rendimiento que ya no depende de la cantidad de datos, que es la promesa principal de la virtualización.

Decida cuándo merece la pena utilizar la virtualización.

Renderizar miles de nodos DOM incrementa el coste del diseño, el uso de memoria y los tirones durante el desplazamiento; puede confirmarlo mediante el recuento de nodos de DevTools. La virtualización renderiza únicamente la ventana visible y un búfer, manteniendo reducido el DOM.

react-window es una opción enfocada y ligera frente a react-virtualized y TanStack Virtual. Utilícela para listas grandes o pesadas y omítala en listas cortas y sencillas.