FlashList vs FlatList

Compensaciones de FlashList de Shopify, reciclaje y lista de verificación de migración - cuando la lista predeterminada no es suficientemente rápida.

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

import { FlashList } from "@shopify/flash-list";
import { StyleSheet, Text, View } from "react-native";
 
interface Post {
  id: string;
  title: string;
}
 
const ESTIMATED_ROW_HEIGHT = 88;
 
export function PostFeed({ posts }: { posts: Post[] }) {
  return (
    <FlashList
      data={posts}
      estimatedItemSize={ESTIMATED_ROW_HEIGHT}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.title} numberOfLines={2}>
            {item.title}
          </Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
}
 
const styles = StyleSheet.create({
  row: { paddingHorizontal: 16, paddingVertical: 12, backgroundColor: "#fff" },
  title: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  separator: { height: 8 },
});

Cuándo usarlo: Feeds cargados de imágenes, cronogramas de chat o cualquier lista donde la generación de perfiles muestre caídas de fotogramas durante el desplazamiento rápido en dispositivos Android de rango medio.

Ejemplo funcional

import { memo, useCallback } from "react";
import { FlashList } from "@shopify/flash-list";
import { Image, StyleSheet, Text, View } from "react-native";
 
interface Product {
  id: string;
  name: string;
  price: string;
  imageUrl: string;
}
 
const PRODUCTS: Product[] = Array.from({ length: 200 }, (_, i) => ({
  id: `p-${i}`,
  name: `Product ${i + 1}`,
  price: `$${(9.99 + (i % 50)).toFixed(2)}`,
  imageUrl: `https://picsum.photos/seed/${i}/120/120`,
}));
 
const ESTIMATED_ROW_HEIGHT = 96;
 
const ProductRow = memo(function ProductRow({ item }: { item: Product }) {
  return (
    <View style={styles.row}>
      <Image source={{ uri: item.imageUrl }} style={styles.thumb} />
      <View style={styles.meta}>
        <Text style={styles.name} numberOfLines={1}>
          {item.name}
        </Text>
        <Text style={styles.price}>{item.price}</Text>
      </View>
    </View>
  );
});
 
export default function ProductFeedScreen() {
  const renderItem = useCallback(
    ({ item }: { item: Product }) => <ProductRow item={item} />,
    [],
  );
 
  return (
    <View style={styles.screen}>
      <FlashList
        data={PRODUCTS}
        estimatedItemSize={ESTIMATED_ROW_HEIGHT}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        drawDistance={250}
        contentContainerStyle={styles.list}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  list: { paddingVertical: 8 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: "#fff",
    minHeight: ESTIMATED_ROW_HEIGHT,
  },
  thumb: { width: 72, height: 72, borderRadius: 8, backgroundColor: "#e2e8f0" },
  meta: { flex: 1 },
  name: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  price: { fontSize: 14, color: "#2563eb", marginTop: 4 },
});

Lo que esto demuestra:

• estimatedItemSize establecido en la altura típica de la fila - requerido para las matemáticas de diseño de FlashList.
• minHeight en la fila alinea el tamaño renderizado con la estimación para un desplazamiento estable.
• memo en ProductRow se empareja con el reciclaje de vistas - las filas deben tolerar la reutilización sin estado obsoleto.
• drawDistance={250} pre-renderiza ligeramente por delante de la ventana de visualización para reducir destellos en blanco durante el desplazamiento rápido.
• Los mismos patrones de keyExtractor / renderItem que FlatList - la migración es principalmente adiciones de props.

Profundización

Cómo funciona

• FlatList virtualiza montando/desmontando subárboles de filas a medida que entran y salen de la ventana de renderizado. El desplazamiento rápido aún puede asignar muchas vistas por segundo.
• FlashList mantiene un grupo reciclado de contenedores de filas - nuevos datos se vinculan a vistas nativas existentes en lugar de crear nuevos árboles cada vez.
• FlashList necesita estimatedItemSize porque diseña contenido antes de que cada fila se mida - la estimación controla los cálculos de desplazamiento hasta que llega la medida real.
• Las estimaciones incorrectas causan salto de desplazamiento (el contenido se desplaza cuando la altura real difiere) o espacios en blanco breves durante el desplazamiento rápido.
• FlashList admite el mismo modelo mental: data, renderItem, keyExtractor, separadores, encabezados, onEndReached.
• Bajo el capó, FlashList sigue ejecutándose en la infraestructura de desplazamiento nativa de React Native - no es una implementación de lista nativa separada.

FlatList vs FlashList

Lista de verificación de migración

1. Instalar: npx expo install @shopify/flash-list
2. Intercambiar importación: FlatList - FlashList de @shopify/flash-list
3. Agregar estimatedItemSize: Mide una fila típica en DevTools o especificaciones de diseño (incluye padding).
4. Auditar componentes de fila: Elimina estado local que persiste después del reciclaje; deriva la interfaz de usuario solo de props item.
5. Coincide con alturas mínimas: Establece minHeight o altura fija cercana a la estimación cuando sea posible.
6. Alturas variables: Usa overrideItemLayout por tipo de elemento o mantén listas separadas por variante de diseño.
7. Prueba desplazamiento rápido: Desplázate rápidamente en un dispositivo Android de gama baja; vigila los espacios en blanco y los saltos.
8. Re-prueba onEndReached: El comportamiento del umbral es similar pero verifica guardias de paginación.
9. Listas de sección: Usa FlashList con encabezados adhesivos o mantén SectionList hasta que necesites la ganancia de rendimiento.
10. Genera perfiles antes/después: Monitor de rendimiento de React Native DevTools o console.time alrededor de sesiones de desplazamiento.

// Antes
import { FlatList } from "react-native";
<FlatList data={items} renderItem={...} keyExtractor={...} />
 
// Después
import { FlashList } from "@shopify/flash-list";
<FlashList
  data={items}
  estimatedItemSize={72}
  renderItem={...}
  keyExtractor={...}
/>

Props de ajuste

<FlashList
  data={items}
  estimatedItemSize={120}
  getItemType={(item) => (item.pinned ? "pinned" : "normal")}
  overrideItemLayout={(layout, item) => {
    layout.size = item.pinned ? 160 : 96;
  }}
  renderItem={renderItem}
/>

Errores comunes de reciclaje

• Las filas recicladas reutilizan la misma instancia de componente - useState dentro de una fila puede mostrar el estado del elemento anterior durante un fotograma.
• Los efectos secundarios en useEffect sin dependencias propias se activan en el elemento incorrecto.
• Solución: Mantén el estado de fila en datos item o mapas padre (expandedIds); las filas deben ser funciones puras de props.

Notas de TypeScript

import type { FlashListProps, ListRenderItem } from "@shopify/flash-list";
 
interface Article {
  id: string;
  headline: string;
}
 
type ArticleListProps = Pick<
  FlashListProps<Article>,
  "data" | "onEndReached" | "refreshing" | "onRefresh"
> & {
  onPress: (article: Article) => void;
};
 
function ArticleList({ data, onPress, ...rest }: ArticleListProps) {
  const renderItem: ListRenderItem<Article> = useCallback(
    ({ item }) => <ArticleRow article={item} onPress={() => onPress(item)} />,
    [onPress],
  );
 
  return (
    <FlashList
      data={data}
      estimatedItemSize={104}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      {...rest}
    />
  );
}

• Importa tipos de @shopify/flash-list, no de react-native.
• FlashListProps<T> refleja FlatListProps<T> para la mayoría de props de lista.

Parámetros y valores de retorno

Errores comunes

• Falta estimatedItemSize - FlashList advierte y vuelve a adivinanzas de diseño deficientes; el desplazamiento se siente roto. Solución: Siempre establécelo; mide filas reales en el simulador.

• Estimación lejos de la realidad - Una estimación de 200px en filas de 80px causa salto cuando la medida se corrige. Solución: Mide la altura de fila p50; usa overrideItemLayout para valores atípicos.

• Componentes de fila con estado - useState para "me gusta" dentro de la fila muestra el estado de "me gusta" del elemento anterior después del reciclaje. Solución: Almacena estado de interacción en mapas padre/item o extraData.

• Migración sin memo - El reciclaje amplifica re-renderizados innecesarios dentro de filas. Solución: memo componentes de fila; renderItem estable con useCallback.

• Usar FlashList para 10 filas de configuración - Dependencia adicional y ajuste sin ganancia medible. Solución: Mantén FlatList o ScrollView hasta que la generación de perfiles demuestre la necesidad.

• Ignorar dimensiones de imagen - Las imágenes que se cargan de forma asincrónica cambian la altura de fila después del primer diseño, causando salto en ambos tipos de lista; peor cuando la estimación es incorrecta. Solución: width/height fijos en Image, fondo de marcador de posición o proporción de aspecto conocida.

• Asumir paridad de API del 100% - Algunos props de borde difieren; prueba ListHeaderComponent, numColumns y desplazamiento anidado. Solución: Lee la documentación de @shopify/flash-list para tu versión; ejecuta la lista de verificación de migración en el dispositivo.

Alternativas

Preguntas frecuentes

Relacionado

• FlatList Recipes - props de línea de base antes de migrar a FlashList
• List Performance Tuning - memo, manejadores estables y conceptos de windowSize que se aplican a ambas listas
• Virtualization Gotchas - filas en blanco, recorte y errores comunes de reciclaje
• Infinite Scroll & Pagination - props de paginación después de la migración
• @shopify/flash-list - instalación y configuración específica de la biblioteca
• Performance Case Study: Feed at Scale - FlashList en el mundo real + ajuste de imagen

Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (expo ~57.0.4).