Um exemplo bem simples, tenho 1 componente chamado Lista na qual implemento uma FlatList. (Ocultei o json/obj de dados)
import React from 'react';
import { FlatList } from 'react-native';
import ItemLista from '../ItemLista';
function Lista() {
return (
<FlatList
data={users}
renderItem={({item}) => <ItemLista {...item} />}
keyExtractor={item => item.id.toString()}
/>
);
}
export default Lista;
E meu componente ItemLista
import React from 'react';
import { View, Text} from 'react-native';
interface Props {
id: number
nome: string
}
function ItemLista({id, nome}: Props) {
console.log('Renderizou ItemLista')
return (
<View >
<Text>{id} - {nome}</Text>
</View>
);
}
export default ItemLista;
Dessa forma como está montando, sempre que abro a tela que carrega essa FlatList que tem 40 itens. Ela faz o seguinte comportamento por padrão:
Renderiza 10 depois os 10 já renderiza dos + 10 depois os 20 renderizados + 10 e assim por diante. Como podemos fazer para evitar isso?
Numa lista de 100 itens por exemplo da umas 500 renderizações (console.log(Renderizou ItemLista')(500)
O que eu fiz? Simplesmente no ItemLista exportei como React.memo(ItemLista) e pronto, se tenho 40 itens ele mostra somente 40 console.log(Renderizou ItemLista').
Queria saber se esse é o jeito correto de implementar mesmo, ou tem outra forma?