Melhores Práticas para Listas
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
Escolha ScrollView para conteúdo estático pequeno: Menos de ~20 itens não expansíveis com tipos de layout mistos - assim que a lista crescer ou paginar, mude para virtualização.
Use FlatList por padrão para feeds: FlatList recicla linhas fora da tela - mapear centenas de itens dentro de ScrollView aloca cada linha na memória e bloqueia a thread JS.
Avalie FlashList para feeds pesados: No SDK 57, Shopify FlashList melhora a taxa de transferência de reciclagem quando perfis mostram quedas de quadros - migre com estimatedItemSize e um checklist de migração medido.
Chaves devem ser strings estáveis: keyExtractor deve retornar IDs do servidor - chaves de índice quebram seleção, animação e estado quando itens são ordenados, filtrados ou paginados.
Nunca use o índice do array como chave para dados dinâmicos: key={index} causa o flash de conteúdo incorreto da linha durante inserção/exclusão - usuários veem curtidas pulando entre posts.
Extraia renderItem para uma linha memoizada: Fechamentos renderItem inline recriam a cada renderização pai - const Row = memo(function Row…) mais um manipulador useCallback estável.
Passe extraData quando a seleção controla a UI: Sem extraData, FlatList pode pular a re-renderização de linhas visíveis após selectedId mudar - passe a fatia mínima de estado que afeta a aparência da linha.
Eleve estilos de lista para StyleSheet: contentContainerStyle={{ padding: 16 }} fresco a cada renderização pai invalida otimizações de lista - cacheie estilos de wrapper.
Use getItemLayout para linhas de altura fixa: Linhas de caixa de entrada e configurações com altura uniforme pulam a medição assíncrona - rolar para um índice se torna instantâneo.
Não minta para getItemLayout: length ou offset incorretos produzem lacunas em branco e rolagem instável - meça uma vez na revisão de design e mantenha a altura sincronizada com os separadores.
Separe estados vazio e de carregamento: ListEmptyComponent não deve girar para sempre - ramifique esqueletos ListEmptyComponent vs ListFooterComponent enquanto a primeira página carrega.
Pull-to-refresh reinicia a paginação: onRefresh deve limpar o estado do cursor e buscar a página um novamente - anexar a um cursor obsoleto após a atualização duplica itens.
Proteja onEndReached: Dispare apenas quando !isFetching && hasNextPage - caso contrário, a rolagem de momentum dispara buscas duplicadas de página no final.
Mostre esqueletos de rodapé para paginação: Uma pequena linha de carregamento em ListFooterComponent é melhor que um spinner de tela inteira para a segunda página - usuários mantêm o contexto no feed.
Pré-calcule seções do SectionList em useMemo: Agrupar centenas de itens na renderização aloca a cada passagem - derive sections quando os dados de origem ou a ordem de classificação mudarem.
Use cabeçalhos fixos intencionalmente: stickySectionHeadersEnabled ajuda listas alfabéticas - desabilite quando cabeçalhos se sobrepõem a conteúdo hero complexo no topo.
Habilite nestedScrollEnabled para trilhos horizontais: Feed vertical + prateleira horizontal precisa de rolagem aninhada explícita no Android - teste a transferência de gestos em dispositivos reais.
Evite FlatList vertical dentro de ScrollView vertical: Contêineres de rolagem duplos lutam contra gestos e quebram a virtualização - um eixo deve controlar a rolagem; use apenas listas internas horizontais.
Ajuste windowSize após profiling: windowSize menor reduz a memória; muito baixo causa linhas em branco durante giros rápidos - comece com os padrões, ajuste com Flashlight ou RN DevTools.
Defina estimatedItemSize do FlashList próximo à realidade: Estimativas distantes da altura medida causam "layout thrash" e quadros em branco - meça a altura média da linha do conteúdo de produção.
Evite funções anônimas em renderItem: onPress={() => toggle(item.id)} dentro de linhas derrota memo - passe id para linhas que chamam manipuladores estáveis.
Valide alturas de linha dinâmicas: Linhas de altura variável sem medição causam a montagem de conteúdo incorreto pela virtualização - use overrideItemLayout do FlashList ou aceite seções não virtualizadas.
Teste rotação e escala de fonte em listas: Fontes de acessibilidade maiores mudam a altura da linha - getItemLayout fixo pode precisar de medição dinâmica ou constantes atualizadas.
Role para o topo ao retocar a aba via ref: Exponha flatListRef.current?.scrollToOffset({ offset: 0 }) de eventos de navegação - aplicativos de feed esperam esse comportamento.
Execute o checklist de armadilhas de virtualização antes de lançar: Revise chaves, alturas, estados vazios e casos de rolagem aninhada em um dispositivo Android de baixo custo - simuladores escondem bugs de linha em branco.
FlatList até que o profiling prove travamentos nos dispositivos alvo.getItemLayout, aumente ligeiramente windowSize, ou melhore estimatedItemSize do FlashList - linhas em branco são quase sempre matemática de altura, não "React sendo lento".Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026