Windowing — Otimizando sua aplicação React

Windowing — Otimizando sua aplicação React

Em algum momento da nossa trajetória já tivemos ou teremos que lidar com enormes listas de dados que precisarão ser mostrados para nosso usuário. Seja essa lista composta por filmes, produtos, histórico de transações ou imagens, sabe-se que quanto maior a quantidade de elementos que precisam ser renderizados, menor será a velocidade da nossa aplicação se não tratarmos esses dados de forma correta. Ai que entra o conceito de Windowing…

O que é WINDOWING?

É o ato de renderizar apenas aqueles componentes que estão visíveis em tela, ou seja, que estão dentro do viewport do usuário. Mas por que? Desse modo reduzimos o número de elementos que são renderizados ao mesmo tempo, pois sem isso o React precisa fornecer para o DOM a lista inteira de elementos renderizados antes que o primeiro pudesse ser vizualizado e isso levaria um tempo. Então ao aplicar o conceito, aqueles elementos que não estão em foco no momento, não precisam ser renderizados.

React-Window

É uma pequena lib que nos permite aplicar o conceito de windowing na nossa aplicação React, disponibilizando componentes responsáveis por fazer essa renderização dinâmica.

FIXED-SIZE-LIST

Vou ensinar como utilizar o componente fixed-size-list, mas os 4 componentes da biblioteca possuem configurações similares.

Utilizamos o fixed-size-list quando temos uma lista de dados com tamanho já pré-definido. Temos que criar uma função que disponibilizaremos para o componente. Essão função recebe dois parâmetros, o index para identificar individualmente cada elemento da lista e style que é usado para o posicionamento dos elementos, devemos sempre passar o argumento style para o componente que nossa função retorna pois muitas das melhorias de performance são feitas através de css. A função deve identificar o elemento em questão da lista e retornar o componente utilizando os dados desse elemento em específico

Exemplo de função

Agora temos que configurar a nosso componente responsável por chamar essa função. Esse pode receber várias propriedades, mas vou abordar apenas as indispensáveis:

• Height — altura da lista, pode ser um número ou string (ex: ‘50%’), recomendado utilizar um número fixo para listas verticais pois afeta diretamente o número de linhas que serão renderizadas.
• Width — comprimento da lista, pode ser um número ou string (ex: ‘50%’), recomendado utilizar um número fixo para listas horizontais pois afeta o número de colunas que serão renderizadas
• Layout — “vertical” ou “horizontal”
• ItemSize — o tamanho dos itens, para listas verticais é a altura da linha e para horizontais é o comprimento da coluna
• ItemCount — número total de itens da lista, ou seja, seu length

Depois de importar de do react-window e configurar o componente fixed-size-list corretamente, devemos passar a função que criamos anteriormente como child, o resultado é o seguinte

Pronto, feito isso você terá melhorado a performance de sua aplicação e aplicado um conceito bem legal que é o Windowing.

Espero ter te ajudado 😀