19.11.2024

Rolagem Infinita em ReactJS: Garantindo Alto Desempenho

Resumo Rápido

Para implementar a rolagem infinita no React, é recomendado usar o IntersectionObserver para monitorar eventos de rolagem e o react-window para otimizar a renderização de listas. Coloque dois "observadores" em ambas as extremidades da lista e comece a carregar dados quando um deles for ativado. Com o react-window, apenas a parte visível dos elementos é renderizada, o que melhora o desempenho.

Aqui está um exemplo claro de código:

import { FixedSizeList as List } from 'react-window';

function useInfiniteScroll(loadMoreItems) {
  useEffect(() => {
    const options = { /* ... parâmetros ... */ };
    const topObserver = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) loadMoreItems('cima');
    }, options);
    const bottomObserver = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) loadMoreItems('baixo');
    }, options);

    topObserver.observe(document.getElementById('top-sentinel'));
    bottomObserver.observe(document.getElementById('bottom-sentinel'));
    return () => {
      topObserver.disconnect();
      bottomObserver.disconnect();
    };
  }, []);
}

const InfiniteLoader = ({ loadMoreItems }) => {
  useInfiniteScroll(loadMoreItems);
  return (
    <List height={300} itemCount={1000} itemSize={35} width={300}>
      {({ index, style }) => (
        <>
          {index === 0 && <div id="top-sentinel"></div>}
          <div style={style}>Item {index}</div>
          {index === 999 && <div id="bottom-sentinel"></div>}
        </>
      )}
    </List>  // Total de 1000 itens na lista
  );
};

A função loadMoreItems deve carregar dados tanto do topo quanto da base da lista. Ajuste as configurações do FixedSizeList para atender aos seus objetivos. Esta abordagem combina desempenho e fluidez na rolagem infinita.

Otimização de Desempenho e Renderização

Estratégia de Rolagem Suave

É crucial garantir uma rolagem suave, especialmente quando a lista excede 10.000 elementos. Medições cuidadosas das alturas dos elementos e o uso de eventos onload para ajustes dinâmicos ajudam a evitar saltos.

// Acompanhe a altura dos itens no componente da lista usando `onload`
const ItemComponent = ({ src }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const height = ref.current.offsetHeight;
      // storeElementHeight(index, height); // Função para acompanhar a altura
    }
  }, [src]);

  return <img ref={ref} src={src} onLoad={() => {/* Tratamento de carregamento */}} alt="" />;
};

Gerenciamento de Estado em React

Minimize o uso de estado no React rastreando o índice inicial e o número de itens na tela, atualizando a lista de acordo com os dados de rolagem que mudam.

Tratamento de Itens com Altura Variável

Para itens com alturas variáveis, use react-variable-height-infinite-scroller para uma rolagem mais suave. Para garantir uma renderização consistente, atribua chaves exclusivas aos elementos e ajuste a posição da rolagem com base nas alturas dos itens usando estado ou contexto.

Explorando Bibliotecas de Componentes

Considere recursos como react-data-grid para edição e integração de carregamento gradual. Visite http://react.rocks/ — uma ampla seleção de componentes e materiais.

Visualização

A rolagem infinita em ambas as direções parece uma jornada através de um reino de conteúdo, melhorando a experiência do usuário.

Aqui está como funciona:

|---🔄---|
| <-[📄📄📄] -> | # Pronto para rolar! O conteúdo está a caminho de ambos os lados.

Rolando para Cima:

|---🔄---|
| <-[📄📄📄📄📄] -> | # Novo conteúdo está surgindo que você ainda não viu.

Rolando para Baixo:

|---🔄---|
| <-[📄📄📄📄📄] -> | # Novo conteúdo está sendo revelado.

Jornada Infinita:

|---🔄---|
| <-[...📄📄📄📄📄...] -> | # Infinidade, a rolagem não conhece limites...

O conteúdo é carregado a tempo, como uma pizza quente do entregador — o usuário não vê limites.

Mantendo a Integridade da Lista e Maximizando o Desempenho

Usando <div> Vazias

Adicione um grande <div> vazio no início da lista para criar a ilusão de que elementos anteriores ainda estão presentes.

Aplicando Throttling e Debouncing

Implemente debouncing e throttling no evento de rolagem para evitar operações de renderização desnecessárias e atualizações de estado que podem reduzir o desempenho.

Salvando a Posição da Rolagem

Ao recarregar a página ou navegar pelo site, salve a posição da rolagem para que o usuário retorne ao ponto onde parou em sua jornada infinita.

Recursos Úteis

1. GitHub - bvaughn/react-virtualized: Componentes React para renderizar grandes listas e dados tabulares de forma eficiente — renderização eficaz de grandes listas e dados tabulares em React.
2. react-window — otimização da exibição de elementos para rolagem infinita.
3. Intersection Observer API - Web API | MDN — noções básicas sobre como trabalhar com a API para implementar rolagem infinita.
4. Como Criar um Componente de Rolagem Infinita em React Usando Hooks — um guia detalhado para criar rolagem infinita com React Hooks.
5. Debouncing e Throttling Explicados com Exemplos | CSS-Tricks — debouncing e throttling usados na rolagem, ilustrados com exemplos claros.
6. Padrões do React — padrões modernos do React para abordar diversas tarefas.

Video

Navigation