Diferencias entre ScrollView y FlatList para listas grandes

La diferencia entre usar FlatList y ScrollView en React Native impacta directo en el rendimiento. Cuando la lista crece, el enfoque adecuado evita lag, mantiene la app fluida y mejora la experiencia de usuario, especialmente en pantallas como el home con muchos hábitos.

¿Por qué FlatList mejora el rendimiento en listas grandes?

FlatList “lee” el contenido hoja por hoja, renderizando solo lo necesario a medida que haces scroll. ScrollView, en cambio, intenta mostrar todo el “libro” de una vez, lo que provoca caídas de rendimiento cuando hay muchísimos hábitos y el scroll se siente con lag. Para listados grandes, FlatList es la opción adecuada; para listas pequeñas, ScrollView puede ser suficiente.

¿Qué problema aparece con ScrollView cuando crece el listado?

• Renderiza todos los elementos al mismo tiempo.
• Aumenta el consumo de memoria y procesamiento.
• Se percibe lag al desplazarse.
• No es funcional para listados demasiado grandes.

¿Cómo migrar el home de ScrollView a FlatList paso a paso?

Migrar implica definir identificadores y cómo se renderiza cada ítem, añadir espaciados y manejar el estado vacío. Así logras una lista eficiente y clara.

¿Qué constantes y funciones necesitas?

• Un identificador único con keyExtractor: se obtiene desde el ítem (ID del hábito) para que cada elemento sea estable.
• Un renderizador de ítems con useCallback: define cómo se ve cada hábito en pantalla.
• Un separador de elementos: aporta espaciado visual entre tarjetas.
• Un estado vacío: muestra un mensaje centrado cuando no hay hábitos.

// Import principal desde React Native
import { FlatList } from 'react-native';

// Identificador único por ítem
const keyExtractor = useCallback((item) => item.id, []);

// Render de cada hábito
const renderItem = useCallback(({ item }) => (
  <HabitCard habit={item} onToggle={toggle} />
), [toggle]);

// Separador entre ítems
const ItemSeparator = () => <View style={{ height: 8 }} />;

// Estado vacío
const Empty = () => (
  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
    <Text>La lista está vacía.</Text>
  </View>
);

// Reemplazo de ScrollView por FlatList
<FlatList
  data={habits}
  keyExtractor={keyExtractor}
  renderItem={renderItem}
  ItemSeparatorComponent={ItemSeparator}
  ListEmptyComponent={Empty}
/>

¿Cómo conectar la data y optimizar el renderizado?

• Pasa la propiedad data con tus hábitos.
• Usa keyExtractor para identidades estables.
• Define renderItem con useCallback para evitar renders innecesarios.
• Agrega un ItemSeparator para el espaciado visual.
• Implementa un estado vacío que muestre un texto claro cuando la lista esté sin datos.
• Aplica un estilo con inset para respetar el área segura del dispositivo.

¿Qué opciones afinan la experiencia de scroll?

Una vez montada la FlatList, hay ajustes que la hacen más eficiente y limpia visualmente.

¿Cómo limitar lo que se muestra al inicio y mejorar la velocidad?

• Renderiza solo ocho hábitos al inicio y, al llegar al final del scroll, renderiza los demás. Así mejoras la percepción de velocidad.
• Configura el windowSize para ajustar cuántas “páginas” virtuales mantiene la lista en memoria.

• Oculta la barra de scroll (déjala en false) para una apariencia más limpia.

• En pantalla se verá igual que con ScrollView, pero la diferencia está en el rendimiento cuando superas 10 o 30 hábitos.

• Con esto, tienes dos etiquetas para listas: usa ScrollView en listados pequeños y FlatList para listados con muchos componentes, asegurando un renderizado correcto y fluido.

¿Te quedó alguna duda sobre la migración o quieres ver otro ejemplo con tus datos de hábitos? Deja tu comentario y seguimos construyendo juntos.