0

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?

1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    25/03/2022 às 0:00

1 Resposta 1

0

Você pode utilizar algumas propriedades da própria FlatList para ajudar a otimizar a mesma, como por exemplo:

maxToRenderPerBatch: Controla o número de itens que são renderizados a cada vez que você realiza o 'scroll' na lista. O valor padrão é 10.

updateCellsBatchingPeriod": Valor em mili-segundos de qual o delay para a renderização dos itens a cada vez que você realiza o scroll, o valor padrão é 50.

initialNumToRender: Número de itens que será inicialmente renderizado em tela ao iniciar a FlatList. O valor inicial é dez.

Você basicamente deve ir testando novos valores para as propriedades até encontrar o comportamento que lhe agrade para sua FlatList.

Para mais informações, recomendo a leitura desta documentação no site do React Native com mais informações sobre otimizações de FlatList's.

https://reactnative.dev/docs/optimizing-flatlist-configuration

4
  • Cara então, já tinha visto essas props e até outras, nenhuma delas muda esse comportamento padrão que ela tem de fazer renderizações a mais do que o número de itens da lista. Com o memo isso não acontece, mas queria saber se isso é uma boa prática
    – Bernardo
    24/03/2022 às 23:49
  • Não tem problema você utilizar o 'memo'.
    – Felipe
    25/03/2022 às 14:30
  • Outra coisa que percebi hoje, no emulador ao carregar a tela carrega todos os itens, no celular só carrega 10, e posteriormente + 10 quando vai scroolando para baixo, não sei porque esse comportamento estranho no emulador.
    – Bernardo
    25/03/2022 às 16:32
  • Isso pode variar devido ao dispositivo / plataforma. Vale tentar ajustar de acordo com a experiência que você está esperando usando a propriedade 'onEndReachedThreshold' (reactnative.dev/docs/flatlist#onendreachedthreshold)
    – Felipe
    25/03/2022 às 18:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .