Optimización de la configuración de FlatList

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Términos

• VirtualizedList: El componente detrás de FlatList (implementación de React Native del concepto de Virtual List)

• Consumo de memoria: Cantidad de información sobre tu lista que se almacena en memoria, lo que podría causar un fallo en la aplicación.

• Capacidad de respuesta: Habilidad de la aplicación para reaccionar a interacciones. Baja capacidad de respuesta ocurre, por ejemplo, cuando tocas un componente y tarda en responder, en lugar de hacerlo inmediatamente como se espera.

• Áreas en blanco: Cuando VirtualizedList no puede renderizar tus elementos con suficiente rapidez, puedes llegar a secciones de tu lista con componentes no renderizados que aparecen como espacios vacíos.

• Viewport: Área visible del contenido que se renderiza en píxeles.

• Window: Área donde deben montarse los elementos, que generalmente es mucho más grande que el viewport.

Props

Esta es una lista de props que pueden ayudar a mejorar el rendimiento de FlatList:

removeClippedSubviews

Type	Default
Boolean	true on Android, otherwise false

Si es true, las vistas fuera del viewport se desconectan automáticamente de la jerarquía de vistas nativa.

Ventajas: Reduce el tiempo en el hilo principal, disminuyendo el riesgo de pérdida de fotogramas, al excluir vistas fuera del viewport de los recorridos de renderizado y dibujo nativo.

Desventajas: Esta implementación puede tener errores, como contenido faltante (observado principalmente en iOS), especialmente con transformaciones complejas o posicionamiento absoluto. Tampoco ahorra memoria significativa porque las vistas no se liberan, solo se desconectan.

maxToRenderPerBatch

Type	Default
Number	10

Prop de VirtualizedList que puede pasarse a través de FlatList. Controla la cantidad de elementos renderizados por lote, que es el siguiente grupo de elementos que se muestra en cada desplazamiento.

Ventajas: Un número mayor reduce las áreas en blanco al desplazarse (aumenta la tasa de llenado).

Desventajas: Más elementos por lote implica períodos más largos de ejecución de JavaScript que pueden bloquear otros eventos (como pulsaciones), afectando la capacidad de respuesta.

updateCellsBatchingPeriod

Type	Default
Number	50

Mientras maxToRenderPerBatch define la cantidad de elementos por lote, establecer updateCellsBatchingPeriod le indica a tu VirtualizedList el retraso en milisegundos entre lotes (frecuencia de renderizado de elementos en la ventana).

Ventajas: Combinar esta prop con maxToRenderPerBatch permite, por ejemplo, renderizar más elementos en lotes menos frecuentes o menos elementos en lotes más frecuentes.

Desventajas: Lotes menos frecuentes pueden causar áreas en blanco. Lotes más frecuentes pueden afectar la capacidad de respuesta.

initialNumToRender

Type	Default
Number	10

Cantidad inicial de elementos a renderizar.

Ventajas: Definir un número preciso que cubra la pantalla en cualquier dispositivo mejora significativamente el rendimiento del renderizado inicial.

Desventajas: Un initialNumToRender bajo puede causar áreas en blanco, especialmente si es insuficiente para cubrir el viewport inicialmente.

windowSize

Type	Default
Number	21

El número representa unidades donde 1 equivale a la altura de tu viewport. El valor predeterminado es 21 (10 viewports arriba, 10 abajo y uno en medio).

Ventajas: Un windowSize mayor reduce la probabilidad de espacios en blanco al desplazarse. Un windowSize menor monta menos elementos simultáneamente, ahorrando memoria.

Desventajas: Un windowSize mayor aumenta el consumo de memoria. Un windowSize menor eleva la probabilidad de ver áreas en blanco.

Elementos de la lista

A continuación, algunos consejos sobre los componentes de elementos de lista. Son el núcleo de tu lista, por lo que deben ser rápidos.

Usa componentes básicos

Cuanto más complejos sean tus componentes, más lento será su renderizado. Evita lógica excesiva y anidamientos profundos en tus elementos de lista. Si reutilizas este componente frecuentemente, crea una versión exclusiva para listas grandes con mínima lógica y anidamiento posible.

Usa componentes ligeros

Componentes más pesados ralentizan el renderizado. Evita imágenes pesadas (usa miniaturas recortadas lo más pequeñas posible). Colabora con diseño: minimiza efectos, interacciones e información en listas. Resérvalos para pantallas de detalle.

Usa memo()

React.memo() crea componentes memorizados que solo se rerenderizan al cambiar sus props. Útil para optimizar componentes en FlatList.

tsx

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

const MyListItem = memo(
  ({title}: {title: string}) => (
    <View>
      <Text>{title}</Text>
    </View>
  ),
  (prevProps, nextProps) => {
    return prevProps.title === nextProps.title;
  },
);

export default MyListItem;

En este ejemplo, MyListItem solo se rerenderiza si cambia el título. Pasamos una función de comparación como segundo argumento de React.memo(). Si retorna true, el componente no se rerenderiza.

Usa imágenes optimizadas con caché

Puedes usar paquetes de la comunidad (como @d11/react-native-fast-image de Dream11) para imágenes de mayor rendimiento. Cada imagen en tu lista es una instancia de new Image(). Cuanto más rápido alcance el hook loaded, más rápido se liberará tu hilo de JavaScript.

Usa getItemLayout

Si todos los elementos tienen igual altura/ancho (listas horizontales), proveer getItemLayout elimina cálculos asíncronos de layout en FlatList. Técnica de optimización altamente recomendable.

Si usas tamaños dinámicos y necesitas máximo rendimiento, considera pedir a diseño un rediseño que optimice performance.

Usa keyExtractor o key

Configura keyExtractor en tu FlatList. Esta prop gestiona caché y actúa como key de React para seguimiento de reordenamiento.

También puedes usar directamente la prop key en tu componente de elemento.

Evita funciones anónimas en renderItem

Para componentes funcionales: extrae renderItem fuera del JSX devuelto. Envuélvela en useCallback para evitar recreaciones en cada render.

Para componentes de clase: define renderItem fuera del método render, evitando recreaciones en cada invocación.

tsx

const renderItem = useCallback(({item}) => (
   <View key={item.key}>
      <Text>{item.title}</Text>
   </View>
 ), []);

return (
  // ...
  <FlatList data={items} renderItem={renderItem} />;
  // ...
);