Performance

Virtualização de Listas

Renderizar apenas os itens visíveis no viewport — não todos os 10.000 de uma vez no DOM.

Definição

Virtualização (windowing) é a técnica de renderizar apenas os itens visíveis de uma lista grande. Mantém uma 'janela' (window) de itens no DOM e atualiza conforme o scroll. Bibliotecas: react-window, react-virtualized, TanStack Virtual.

Problema → Solução

Problema

10.000 itens = 10.000 nós reais no DOM = browser travado no scroll e na renderização.

Solução

react-window ou react-virtualized renderiza apenas ~15 itens visíveis, independente do total.

Dica de entrevista

Tip

Para listas > 200 itens com lentidão visível: virtualização é sempre o primeiro passo.

Código

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={56}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <ItemRow data={items[index]} />
    </div>
  )}
</FixedSizeList>

Perguntas de entrevista

Q.react-window vs react-virtualized?▾

A.react-window é a versão moderna, mais leve e simples (mesmo autor). react-virtualized tem mais features (grid, masonry) mas é maior. Para 90% dos casos, use react-window.

Q.Como virtualização afeta SEO?▾

A.Negativamente — só os itens visíveis estão no DOM. Para listas que precisam ser indexadas (ex: produtos), prefira paginação tradicional ou SSR sem virtualização. Use virtualização apenas em listas internas/dashboards.

Q.Como lidar com itens de altura variável?▾

A.react-window oferece VariableSizeList. TanStack Virtual mede automaticamente. A lógica é mais complexa — precisa do tamanho de cada item antes de renderizar (ou medir dinamicamente).

8/122← →