O Problema da Renderização de Listas Grandes

Suponha que você percorra um vetor de dez mil itens com map e renderize um elemento li para cada um. O React criará diligentemente dez mil nós do DOM, embora apenas algumas dezenas caibam na tela de uma vez.

A maioria desses nós fica fora da tela e invisível, mas o navegador ainda precisa criar, organizar e manter cada um deles.

Árvores DOM grandes têm um custo real para o navegador. O layout, o recálculo de estilos e o uso de memória aumentam conforme a quantidade de nós, portanto uma lista enorme torna a renderização inicial mais lenta e aumenta o uso de memória.

Até interações simples podem apresentar travamentos quando o mecanismo precisa acompanhar e reorganizar dezenas de milhares de nós.

É ao rolar uma lista gigantesca que os usuários mais sentem o problema. O navegador redesenha a tela e pode recalcular o layout conforme o conteúdo se move; com nós demais, a taxa de quadros cai abaixo do nível de fluidez.

O resultado é uma rolagem instável e lenta, que faz a interface parecer sem resposta, independentemente da velocidade do restante do aplicativo.

Você pode confirmar o problema no painel Memory do DevTools do navegador, que informa a quantidade de nós DOM na página. Uma lista que cria milhares de nós aparece claramente nesse painel.

Observar essa contagem aumentar rapidamente à medida que você renderiza mais itens fornece evidências concretas de que o tamanho do DOM é o gargalo.

A virtualização, às vezes chamada de técnica de janela, renderiza apenas os itens atualmente visíveis e um pequeno buffer, em vez da lista inteira. Conforme você rola, os itens que entram na área visível são montados, e os que saem dela são desmontados.

Isso mantém o DOM ativo pequeno, independentemente da quantidade de itens dos dados, desvinculando o tamanho do DOM do tamanho do conjunto de dados.

A janela visível é calculada a partir da posição de rolagem, da altura do contêiner e da altura dos itens. Dividir a altura da área de visualização pela altura do item fornece aproximadamente quantas linhas cabem, e o deslocamento da rolagem indica quais são elas.

A biblioteca usa esses números para decidir exatamente qual fatia de itens renderizar a cada momento.

Várias bibliotecas implementam a técnica de janela. react-virtualized é repleta de recursos, mas maior; react-window é uma reescrita menor e mais especializada do mesmo autor; e TanStack Virtual é uma opção moderna sem interface.

Para a maioria das listas, react-window oferece um excelente equilíbrio entre simplicidade e desempenho, motivo pelo qual este curso se concentra nele.

A virtualização traz benefícios quando as listas são longas, aproximadamente com várias centenas de linhas ou mais, ou quando as linhas contêm muitas imagens e componentes aninhados. Nesses casos, o tamanho do DOM realmente prejudica o desempenho.

Feeds infinitos, tabelas de dados grandes e históricos de conversa são cenários típicos em que a técnica de janela se torna essencial, e não apenas opcional.

Para listas curtas, com algumas dezenas de itens simples, a virtualização acrescenta complexidade sem trazer um benefício significativo. A sobrecarga do posicionamento absoluto e da medição pode até resultar em um desempenho pior.

Reserve a técnica de janela para conjuntos de dados realmente grandes; para os pequenos, um map simples é mais fácil e perfeitamente rápido.

Com a técnica de janela, uma lista de cem mil itens mantém no DOM apenas os poucos itens visíveis. Assim, a renderização inicial é rápida, o uso de memória permanece baixo e a rolagem é fluida.

Você troca um pouco de complexidade na configuração por um desempenho que não depende mais da quantidade de dados, que é a principal promessa da virtualização.

Decida quando a virtualização vale a pena.

Renderizar milhares de nós DOM aumenta o custo do layout, o uso de memória e os travamentos durante a rolagem, o que você pode confirmar pela contagem de nós no DevTools. A virtualização renderiza apenas a janela visível e um buffer, mantendo o DOM pequeno.

react-window é uma opção especializada e leve entre react-virtualized e TanStack Virtual. Utilize-a para listas grandes ou pesadas e dispense-a para listas curtas e simples.