Desafios de Desempenho em Listas Extensas

Ao renderizar grandes volumes de dados em componentes como listas ou tabelas em React, frequentemente ocorem problemas de desempenho, como travamentos durante a rolagem. Isso afeta negativamente a experiência do usuário e pode aumentar o consumo de bateria em dispositivos móveis.

As causas principais incluem a criação e manipulação de muitos nós no DOM, levando a recálculos frequentes de layout e repinturas.

Abordagem de Renderização Preguiçosa

Uma técnica comum é a renderização sob demanda, onde apenas uma parte dos dados é exibida inicialmente. À medida que o usuário rola, mais itens são carregados progressivamente.

Essa abordagem melhora a velocidade inicial, mas pode ainda resultar em muitos elementos no DOM após carregamento completo, impactando o desempenho em dispositivos com recursos limitados.

Ideal para cenários com conjuntos de dados moderados.

Renderização Baseada na Área Visível com React-Virtualized

Esta técnica consiste em renderizar apenas os itens atualmente visíveis na tela, com uma pequena margem para pré-carregamento. Os elementos fora da viewport não são montados no DOM, otimizando significativamente o uso de memória e CPU.

Especialmente eficaz para exibir listas muito extenssa de uma única vez, como contatos ou feeds de mídia social.

Implementação com React-Virtualized

A biblioteca react-virtualized fornece componentes React otimizados para renderizar grandes conjuntos de dados. Pode ser instalada via gerenciadores de pacotes como yarn ou npm.

Para utilizá-la, importe os estilos necessários no arquivo de entrada da aplicação e consulte a documentação oficial para detalhes dos componentes.

Exemplo básico de uso do componente List:

import React from 'react';
import ReactDOM from 'react-dom';
import { List } from 'react-virtualized';

// Dados para a lista
const elementos = [
  'Exemplo de nome'
  // Mais itens aqui...
];

// Função para renderizar uma linha individual
function renderItem({
  key,          // Chave única para o elemento
  index,        // Posição na lista
  isScrolling,  // Indica se a rolagem está ativa
  isVisible,    // Verifica se o item é visível
  style         // Estilos obrigatórios para posicionamento
}) {
  return (
    <div key={key} style={style}>
      {elementos[index]}
    </div>
  );
}

// Montagem do componente List
ReactDOM.render(
  <List
    width={300}
    height={300}
    rowCount={elementos.length}
    rowHeight={20}
    rowRenderer={renderItem}
  />,
  document.getElementById('raiz')
);

Ajustando o Componente para Ocupar a Tela Inteira

Para adaptar o tamanho dinamicamente, utilize o componente AutoSizer. Ele expõe as dimensões disponíveis via render props, permitindo que o List se ajuste ao contêiner pai.

Configure o elemento raiz da aplicação com altura de 100% para que o AutoSizer herde as dimensões corretas.

Monitorando Itens Renderizados

O componente List suporta a propriedade onRowsRendered, que é chamada durante a rolagem com informações sobre os índices atualmente renderizados. Isso pode ser usado para sincronizar o estado da aplicação.

// No componente React
handleRowsRendered = ({ startIndex }) => {
  if (this.state.indiceAtivo !== startIndex) {
    this.setState({ indiceAtivo: startIndex });
  }
};

// No JSX
<List
  onRowsRendered={this.handleRowsRendered}
  // Outras props...
/>