FixedSizeList: Renderizando Milhares de Itens

Você adiciona react-window a um projeto usando o gerenciador de pacotes, por exemplo, instalando o pacote react-window. Ele é pequeno e não possui dependências pesadas.

Depois de instalado, importe os componentes de lista necessários, principalmente FixedSizeList para linhas que têm todas a mesma altura.

FixedSizeList precisa de várias propriedades para funcionar: height e width definem o contêiner de rolagem, itemCount indica quantos itens existem e itemSize é a altura de cada linha em pixels.

A propriedade children é uma função de renderização que desenha uma única linha. Com essas informações, o componente conhece a geometria necessária para aplicar a técnica de janela corretamente.

A função de renderização children recebe um objeto com index e style. index indica qual item deve ser renderizado, permitindo que você busque os dados corretos, e style posiciona a linha dentro da lista virtual.

Você retorna o JSX dessa única linha, e react-window chama essa função apenas para as linhas que estão na janela atual.

A propriedade style é essencial e deve ser aplicada ao elemento da sua linha. react-window posiciona cada linha de forma absoluta, usando top para colocá-la no deslocamento correto dentro de um contêiner alto com rolagem.

Sem aplicar style, todas as linhas ficariam empilhadas na mesma posição, e a virtualização deixaria de funcionar visualmente.

O erro mais comum ao usar react-window é omitir a propriedade style na linha. A lista parecerá quebrada, com as linhas sobrepostas no topo e a rolagem funcionando de maneira incorreta.

Sempre espalhe ou atribua o style fornecido ao elemento mais externo da sua linha para manter o posicionamento correto.

Em vez de capturar seu vetor dentro da função de renderização, você pode passá-lo pela propriedade itemData. react-window então o encaminha para a linha como um campo data, junto com index e style.

Isso mantém o componente de linha desacoplado e pode ajudar na memoização, pois a linha recebe seus dados explicitamente.

FixedSizeList oferece suporte a listas horizontais por meio da propriedade layout definida como horizontal, ou usando as opções direction, conforme a versão. Nesse caso, itemSize representa a largura em vez da altura.

Isso é útil para carrosséis ou linhas do tempo com rolagem horizontal que também contenham muitos itens.

A propriedade overscanCount renderiza algumas linhas extras logo além da janela visível. Esse buffer reduz a chance de aparecer um espaço vazio durante uma rolagem rápida, antes que as novas linhas sejam montadas.

Um overscan pequeno torna a experiência mais fluida, enquanto um grande desperdiça o benefício ao montar linhas demais fora da tela.

FixedSizeList precisa de dimensões explícitas em pixels, o que é pouco prático em layouts responsivos. O componente complementar AutoSizer mede o elemento pai e fornece width e height à lista por meio de uma propriedade de renderização.

Envolver a lista em AutoSizer permite que ela preencha um contêiner flexível sem que você precise codificar tamanhos fixos, adaptando-se conforme o layout muda.

Um FixedSizeList funcional define height, width, itemCount e itemSize, e renderiza as linhas por meio de uma função children que aplica a propriedade style. Opcionalmente, AutoSizer fornece as dimensões, e overscanCount adiciona um buffer.

Com isso, uma lista de qualquer tamanho mantém montadas apenas as linhas visíveis, enquanto a rolagem permanece fluida.

FixedSizeList renderiza linhas com a mesma altura usando height, width, itemCount, itemSize e uma função de renderização children que recebe index e style. Aplicar a propriedade style é obrigatório, caso contrário as linhas se sobrepõem.

Passe dados por meio de itemData, ofereça suporte ao layout horizontal, adicione um pequeno buffer com overscanCount e use AutoSizer para preencher contêineres responsivos sem codificar dimensões fixas.