CodeForjaEntrar
Listas largas y rendimiento

Muestra gratis

Mil filas y el móvil sudando

Muestra gratuita25 puntos

Ya montaste una app con Expo y usaste FlatList sin pensarlo mucho. Ahora toca entender por qué existe, porque cuando la lista crece la diferencia se nota en la mano.

React pinta construyendo un árbol: cada fila que devuelves es un componente, y el teléfono tiene que medir, colocar y dibujar cada uno. Si haces map sobre mil pedidos, creas mil filas de golpe. No es que React sea lento; es que le estás pidiendo al móvil pintar mil cosas antes de enseñar la primera.

Y hay un reloj implacable: para ir fluido, la pantalla se refresca unas sesenta veces por segundo. Eso deja unos 16 milisegundos por fotograma. Si pintar la lista se pasa de ahí, el fotograma se pierde, y esa pérdida es el tirón que sientes al arrastrar el dedo.

Cada fotograma dura ~16 ms presupuesto: 16 ms pintar 1000 filas: se pasa → fotograma perdido → tirón

El móvil además gasta memoria por cada fila viva. Mil filas con su texto y su imagen pueden llenar la memoria y hacer que el sistema cierre la app sin avisar.

La idea que lo arregla todo es tonta de puro simple: no pintes lo que no se ve. En una lista de mil, en pantalla caben ocho o diez. El resto puede esperar.

El problema no es tener mil datos, es pintar mil filas a la vez. El resto del curso va de pintar solo lo justo y de que cada fila trabaje lo mínimo.