Crie infinite scroll no React com um pequeno hook de IntersectionObserver, sem precisar de pacote, e depois mantenha feeds longos rápidos com virtualização. Demos ao vivo e código para copiar.
Coloque um elemento sentinela vazio depois do último item e observe-o com IntersectionObserver. Quando ele chegar a algumas centenas de pixels do viewport, busque a próxima página e adicione-a ao fim. Um hook de vinte linhas faz isso sem biblioteca. Quando a lista chegar a milhares de linhas, adicione virtualização para que só as linhas visíveis existam no DOM.
Opções do IntersectionObserver que importam para infinite scroll
As duas demos abaixo rodam nesta página. A primeira carrega páginas falsas de resultados enquanto você rola o painel dela; a segunda percorre dez mil linhas desenhando só as vinte e poucas que você consegue ver. O código de cada uma está logo abaixo, pronto para copiar.
Não. O IntersectionObserver está disponível em todos os principais navegadores desde 2019, e um hook pequeno cobre o caso comum. Uma biblioteca de busca de dados com helpers de paginação vale a pena quando você já usa uma para fazer cache das requisições.
A virtualização renderiza só as linhas dentro da janela visível mais uma pequena margem, posicionadas dentro de um espaçador com a altura total da lista. Use quando o DOM tiver milhares de linhas e a rolagem ou a digitação começarem a travar. @tanstack/react-virtual e o hook useVirtualizer dele são uma escolha comum.
Os rastreadores de busca não rolam a página como as pessoas, então conteúdo que só aparece depois da rolagem pode nunca ser visto. Dê ao feed URLs paginadas de verdade, como ?page=2, que carregam sozinhas, e coloque links para elas.
Normalmente o efeito recria o observer a cada render porque a identidade do callback muda, ou a primeira página é curta demais para empurrar a sentinela para fora da tela. Guarde o callback mais recente em um ref e garanta que cada página ocupe mais que o viewport.
Retorna um ref para a sentinela. O onLoadMore mais recente fica guardado em um ref, então o observer é criado uma vez a cada mudança de enabled, não a cada render.
A flag loading impede requisições duplicadas, e hasMore desliga o observer no fim.
Instale com npm install @tanstack/react-virtual. A caixa externa rola, a caixa interna tem a altura da lista inteira e cada linha visível é posicionada com translateY.
Só as linhas perto da janela visível são renderizadas. estimateSize é a altura da linha em pixels.
Demo: um feed que carrega enquanto você rola
Role dentro do painel. Uma nova página de dez itens chega cada vez que a sentinela entra no alcance, até oito páginas.
Demo de feed
Post {n}
Carregando...
Você chegou ao fim.
Carregar mais
{items} itens, página {page} de {last}
Reiniciar
Demo: 10.000 linhas, só as visíveis renderizadas
Role a lista e veja como poucas linhas realmente existem na página a cada momento.
Demo de lista virtual
Linha {n}
Renderizando {shown} de {total} linhas
Comece grátis · Sem cartão de crédito