FlatList: qué es, API y optimización en React Native

¿Qué es FlatList?

FlatList es un componente de React Native que implementa una lista virtualizada con renderizado de alto rendimiento para grandes volúmenes de datos. El componente está construido sobre VirtualizedList y proporciona una API declarativa para crear listas planas de cualquier complejidad.

FlatList se introdujo en React Native 0.43 como reemplazo del obsoleto ListView. Según Meta (2026), FlatList se utiliza en el 85% de las aplicaciones de React Native que trabajan con listas. El componente admite todos los escenarios comunes: contactos, fuentes de noticias, catálogos de productos y chats.

Historia y lugar en el ecosistema

Antes de FlatList, los desarrolladores usaban ListView, que requería configuración manual de reutilización de celdas. FlatList automatizó este proceso implementando renderizado por ventanas similar a RecyclerView en Android (2014) y UICollectionView en iOS (2012). En proyectos modernos, FlatList es el estándar de facto para cualquier lista.

Cómo funciona la virtualización de FlatList

La virtualización de FlatList es un mecanismo donde el componente renderiza solo los elementos que caen dentro del área visible de la pantalla, más un pequeño búfer a cada lado. Los elementos restantes no se crean en el DOM, ahorrando memoria y acelerando el renderizado.

Al desplazarse, FlatList reutiliza las celdas View ya creadas, reemplazando sus datos. Esto evita crear miles de Views para una lista de 10 000 elementos. El tamaño de búfer predeterminado es de 10 elementos arriba y abajo del área visible, pero se puede configurar mediante windowSize.

La configuración óptima de estos parámetros permite equilibrar la suavidad del desplazamiento y el consumo de memoria. Para listas con elementos grandes, se recomienda reducir windowSize a 5-7.

API y props principales de FlatList

La API de FlatList incluye un conjunto de props para configurar la visualización y el comportamiento de la lista. Las dos props obligatorias son data (matriz de datos) y renderItem (función de renderizado de elementos). keyExtractor mejora el rendimiento proporcionando una clave única para cada elemento.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent agrega un separador entre elementos, ListHeaderComponent y ListFooterComponent agregan encabezado y pie de página a la lista. Esto permite crear diseños complejos sin envoltorios adicionales.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

Optimización del rendimiento de FlatList

La optimización de FlatList es crítica para aplicaciones con cientos y miles de elementos. Sin una configuración adecuada, la lista puede retrasarse durante el desplazamiento, consumir memoria excesiva y provocar fallos en dispositivos de gama baja.

La primera regla es usar keyExtractor con identificadores únicos y estables. Usar índices como claves provoca una reutilización incorrecta de celdas y errores de estado. La segunda regla es envolver renderItem en useCallback y usar React.memo para el componente de elemento.

getItemLayout para altura fija

Si todos los elementos tienen la misma altura, getItemLayout permite que FlatList calcule la posición de desplazamiento sin medir componentes. Esto proporciona un gran aumento de rendimiento, especialmente al desplazarse a un índice específico.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo para datos evita renderizaciones innecesarias. Si los datos provienen de una API, transfórmelos una vez y guárdelos en caché. Use React.memo para el componente de elemento para evitar renderizar elementos sin cambios.

Listas horizontales y carruseles

FlatList horizontal se crea agregando la prop horizontal={true}. La lista cambia la dirección de desplazamiento al eje X, lo que es útil para carruseles de productos, galerías de imágenes y menús horizontales.

En modo horizontal, es importante configurar correctamente snapToInterval y snapToAlignment para un desplazamiento paso a paso como en los carruseles nativos. El componente maneja automáticamente el momentum y la liberación del dedo, deteniéndose en el elemento más cercano.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged es una devolución de llamada que se activa cuando cambian los elementos visibles. Se usa para análisis, carga diferida de imágenes y activación de videos solo para tarjetas visibles.

Pull-to-refresh y carga infinita

Pull-to-refresh en FlatList se implementa mediante las props refreshing y onRefresh, que funcionan junto con un estado de carga. Al tirar de la lista hacia abajo, se llama a onRefresh, y el indicador refreshing bloquea las llamadas repetidas.

La carga infinita se configura mediante onEndReached, una devolución de llamada que se activa al acercarse al final de la lista. onEndReachedThreshold determina cuántos elementos antes del final se activa el evento. Generalmente se usa paginación basada en cursor.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Importante: onEndReached puede llamarse varias veces. Agregue un indicador isLoading para bloquear solicitudes repetidas hasta que finalice la anterior. Use ActivityIndicator en ListFooterComponent para indicar la carga.