Virtualized Lists: Otimize sua aplicação React com react-virtual

Entendendo Virtualized Lists no React

Virtualized Lists são uma técnica poderosa para otimizar a renderização de listas em aplicações React. Quando lidamos com grandes conjuntos de dados, renderizar todos os itens de uma só vez pode causar lentidão e travamentos. A biblioteca react-virtual resolve esse problema ao renderizar apenas os itens que estão visíveis na tela.

Como funciona o react-virtual?

O react-virtual usa o conceito de "virtualização" para renderizar apenas os itens que estão dentro da área visível do viewport do navegador. Isso significa que, ao invés de renderizar todos os elementos de uma lista, ele renderiza apenas os que estão visíveis, economizando recursos e melhorando a performance.

Instalando o react-virtual

Para começar a usar o react-virtual, primeiro você precisa instalá-lo. Execute o seguinte comando:

npm install react-virtual

Esse comando adiciona a biblioteca ao seu projeto, permitindo que você comece a utilizá-la imediatamente.

Criando uma Virtualized List

Agora que você já instalou a biblioteca, é hora de criar sua lista virtualizada. Vamos supor que você tenha um array de dados chamado items:

const items = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);

Aqui, estamos criando um array com 1000 itens. A seguir, vamos criar o componente de lista virtualizada:

import { useVirtual } from 'react-virtual';

const VirtualizedList = () => {
    const parentRef = React.useRef();
    const rowVirtualizer = useVirtual({
        size: items.length,
        parentRef,
        estimateSize: React.useCallback(() => 35, []),
    });

    return (
        <div ref={parentRef} style={{ height: `400px`, overflow: 'auto' }}>
            <div style={{ height: `${rowVirtualizer.totalSize}px`, position: 'relative' }}>
                {rowVirtualizer.virtualItems.map(virtualRow => (
                    <div key={virtualRow.index} style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        transform: `translateY(${virtualRow.start}px)`,
                    }}>
                        {items[virtualRow.index]}
                    </div>
                ))}
            </div>
        </div>
    );
};

Neste exemplo, estamos usando o hook useVirtual para criar uma lista virtualizada. A propriedade size recebe o número total de itens, enquanto parentRef refere-se ao elemento que contém a lista. A função estimateSize define a altura estimada de cada item, que aqui foi configurada como 35 pixels.

Explicação do código

O componente acima cria uma lista que só renderiza os itens visíveis na tela. O parentRef é um ref que aponta para o contêiner da lista. O rowVirtualizer calcula quais itens precisam ser renderizados com base na rolagem do usuário. Os itens são posicionados absolutamente, o que permite que eles sejam movidos para a posição correta sem afetar a renderização de outros itens.

Vantagens da Virtualização

Implementar virtualização em suas listas oferece várias vantagens:

• Performance: Reduz o tempo de carregamento e a utilização de memória.
• Experiência do usuário: A rolagem se torna mais suave e responsiva.
• Escalabilidade: Permite lidar com grandes conjuntos de dados sem comprometer a performance.

Conclusão

Virtualized Lists são essenciais quando se trabalha com listas grandes em React. Com a biblioteca react-virtual, você pode facilmente otimizar a performance da sua aplicação, proporcionando uma melhor experiência ao usuário. Experimente implementar em seu próximo projeto e veja a diferença!

A Importância das Virtualized Lists em Aplicações React

Virtualized Lists são uma solução eficaz para melhorar a performance de aplicações que lidam com grandes quantidades de dados. Ao renderizar apenas os itens visíveis, você não só economiza recursos, mas também melhora a experiência do usuário. Essa técnica é especialmente útil em aplicações que exigem alta responsividade e eficiência, como dashboards e aplicativos de e-commerce. A biblioteca react-virtual se destaca por sua simplicidade e eficiência, tornando-se uma escolha popular entre desenvolvedores que buscam otimizar suas listas em React.

Algumas aplicações:

• Dashboards com grandes conjuntos de dados
• Aplicativos de e-commerce com listas de produtos
• Aplicações de redes sociais com feeds de posts
• Listas de contatos em aplicativos de mensagens

Dicas para quem está começando

• Comece com listas pequenas para entender a lógica.
• Experimente diferentes valores na função estimateSize para ver o impacto.
• Verifique a performance da sua aplicação usando ferramentas como o Chrome DevTools.
• Testar a lista em diferentes dispositivos para garantir uma boa experiência do usuário.

Compartilhe este tutorial