Listas lentas no React Native: FlatList, FlashList e memorização na prática

Lista é a tela mais comum de qualquer app: produtos, pedidos, mensagens, veículos. E é onde a falta de fluidez mais aparece — travadas ao rolar, espaços em branco quando o dedo desce rápido, aquecimento do celular. Na maioria das vezes, a causa é conhecida.

Nunca use ScrollView com map para listas longas

O ScrollView renderiza todos os itens de uma vez. Com 500 produtos, são 500 componentes na memória. Listas virtualizadas (FlatList ou FlashList) renderizam apenas o que está na tela e um pouco ao redor.

FlatList bem configurada

<FlatList
  data={itens}
  keyExtractor={(i) => i.id}
  renderItem={renderItem}
  initialNumToRender={8}
  windowSize={7}
  removeClippedSubviews
/>

• keyExtractor estável — nunca use o índice.
• renderItem definido fora do render ou com useCallback.
• Item com altura fixa? Informe com getItemLayout e elimine cálculos.

Memorize o item

Se cada item re-renderiza quando qualquer coisa muda na tela, a rolagem engasga. Componentes de item com React.memo e props estáveis cortam esse trabalho.

Imagens: o vilão escondido

Fotos em resolução original, sem cache, decodificadas durante a rolagem. Redimensione no servidor e use uma biblioteca de imagem com cache — detalhes em Imagens pesadas no app: cache, tamanhos e formatos.

FlashList para listas grandes

A FlashList recicla componentes em vez de criar novos, e costuma ser bem mais fluida em listas longas e heterogêneas.

Como medir

Ative o monitor de performance do React Native e observe os quadros por segundo da thread de JavaScript e da interface enquanto rola. Teste num Android intermediário, não no seu iPhone — o porquê está em Testar em dispositivos reais: por que o emulador engana.

Lista fluida combina com carregamento bem feito: veja Skeleton e shimmer no React Native: carregamento que parece rápido e, para o quadro completo de performance, Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals.

Foi esse cuidado que aplicamos no app do Kharbox. Conheça a frente de aplicativos ou fale com a gente.