Combinando Virtualização com Busca de Dados

A rolagem infinita carrega mais dados quando o usuário se aproxima do fim da lista, em vez de usar paginação com botões de página explícitos. Combinada com a virtualização, ela permite navegar por conjuntos de dados enormes com fluidez.

A lista exibe apenas as linhas visíveis, enquanto novos dados são buscados em segundo plano pouco antes de o usuário chegar ao fim.

Os componentes de lista do react-window aceitam uma função de retorno onItemsRendered que informa quais índices de itens estão sendo renderizados no momento. Ela fornece os índices inicial e final visíveis e os índices inicial e final da pré-renderização.

Essa função de retorno permite interagir com a rolagem, ajudando você a detectar até onde o usuário percorreu a lista sem conectar eventos de rolagem brutos.

Para saber quando buscar dados, compare o overscanStopIndex de onItemsRendered com o itemCount atual. Quando a janela renderizada se aproxima do fim dos dados carregados, é preciso buscar mais.

Usar o índice final da pré-renderização dá uma pequena margem de antecedência, acionando a busca um pouco antes de o usuário realmente chegar à última linha.

Quando o índice final ultrapassar um limite, por exemplo, quando estiver a uma tela de distância do itemCount, chame sua função de busca para a próxima página. Proteja essa chamada para não disparar várias solicitações simultâneas.

Um sinalizador de carregamento ou uma verificação para saber se já há uma busca em andamento impede solicitações duplicadas enquanto o usuário percorre a zona de acionamento.

Um truque simples é renderizar itemCount como a quantidade carregada mais um enquanto ainda houver mais dados. A linha adicional exibe um indicador de carregamento, sinalizando que uma busca está em andamento.

Quando os novos dados chegam, a contagem aumenta e a linha do indicador é substituída pelo conteúdo real, oferecendo um retorno visual suave.

O pacote complementar react-window-infinite-loader encapsula essa lógica para você. Você fornece isItemLoaded, loadMoreItems e itemCount, e ele chama seu carregador enquanto o usuário rola em direção às linhas ainda não carregadas.

Ele controla quais intervalos estão carregados e impede chamadas de carregamento redundantes, simplificando uma rolagem infinita robusta.

Para índices ainda não carregados, você pode renderizar linhas de espaço reservado ou linhas esqueleto em vez de espaços vazios. A função de renderização verifica se o item em um índice foi carregado e exibe um esqueleto caso não tenha sido.

Os esqueletos preservam o layout e comunicam o progresso, proporcionando uma experiência melhor do que um espaço vazio enquanto a próxima página está a caminho.

As buscas podem falhar, portanto, trate os erros com elegância. Você pode renderizar uma linha de erro especial no fim, com um botão de nova tentativa que invoca novamente a função de carregamento para o intervalo que falhou.

Isso mantém a lista utilizável após uma falha momentânea e oferece ao usuário uma maneira clara de se recuperar sem recarregar a página inteira.

Dois estilos comuns de paginação alimentam listas infinitas. A paginação por deslocamento solicita dados usando o número da página ou uma quantidade a ignorar, enquanto a paginação por cursor solicita itens depois de um cursor opaco que aponta para o último item visto.

A paginação por cursor geralmente é mais confiável para dados ativos e mutáveis porque evita os deslocamentos e as duplicações que a paginação por deslocamento pode causar quando itens são inseridos.

React Query useInfiniteQuery combina naturalmente com a virtualização. Ele gerencia as páginas buscadas, o próximo cursor e os estados de carregamento e erro, enquanto react-window renderiza as páginas unificadas com eficiência.

Você unifica as páginas em uma única matriz para a lista e chama fetchNextPage a partir do limite de onItemsRendered, obtendo armazenamento em cache e novas tentativas sem custo adicional.

Identifique quando buscar mais dados em uma lista infinita virtualizada.

A rolagem infinita carrega páginas quando o usuário se aproxima do fim. onItemsRendered informa os índices, e comparar overscanStopIndex com itemCount indica quando buscar dados, com proteção contra solicitações duplicadas.

Use linhas de espaço reservado e de erro, react-window-infinite-loader para controlar os intervalos e paginação por cursor para dados ativos. React Query useInfiniteQuery gerencia páginas, cursores e estados junto com a renderização do react-window.