Como você renderiza listas com FlatList?

Question

Accepted Answer

**FlatList** é o componente do React Native para renderizar eficientemente **listas de dados rolláveis**. Ele renderiza itens **preguiçosamente** (apenas o que está visível), tornando-o performático para listas longas — muito melhor do que mapear dados em um ScrollView. ## FlatList — listas eficientes ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList recebe o array de **data**, uma função **renderItem** (renderizando cada item) e um **keyExtractor** (chaves únicas) — e renderiza itens eficientemente. ## Por que FlatList (não ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Recursos úteis do FlatList ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Por que isso importa Compreender FlatList é essencial porque **exibir listas de dados é uma necessidade quase universal** em aplicativos, e FlatList é a forma padrão e performática de fazer isso no React Native, então é um conhecimento imprescindível. Quase todos os aplicativos mostram listas (feeds, mensagens, resultados de pesquisa), e fazer isso eficientemente é importante. O insight fundamental é que **FlatList renderiza itens preguiçosamente** (apenas o que está visível, via virtualização, reciclando enquanto você rola) — tornando-o performático para listas longas, em contraste com o erro comum de usar um **ScrollView com `data.map()`** que renderiza todos os itens de uma vez (mesmo os fora da tela), causando lentidão e problemas de memória para listas longas. Entender **usar FlatList para qualquer lista não trivial** (e ScrollView apenas para conteúdo pequeno e fixo) é um conhecimento prático importante que evita problemas reais de desempenho. Compreender o uso básico (o array `data`, a função `renderItem` e `keyExtractor` para chaves únicas) é necessário para renderizar listas. Entender **recursos úteis** — `onEndReached` (para rolagem infinita/paginação, carregando mais dados perto do final — uma necessidade muito comum), pull-to-refresh, componentes de cabeçalho/rodapé/separador, layouts em grade e horizontais, e SectionList para listas agrupadas — abrange os requisitos comuns de listas que os aplicativos têm. Como exibir listas eficientemente é um requisito de aplicativo quase universal e FlatList (com sua renderização preguiçosa/virtualização) é a solução React Native padrão e performática — muito melhor do que a abordagem ingênua ScrollView+map — entender FlatList é um conhecimento React Native essencial e frequentemente aplicado — um componente fundamental usado em quase todos os aplicativos para exibir listas de dados, onde compreender sua renderização preguiçosa eficiente e recursos (como rolagem infinita e pull-to-refresh) é fundamental para construir listas funcionais e performáticas, uma habilidade padrão para desenvolvimento React Native.