VariableSizeList: Alturas Dinâmicas de Linhas

Às vezes as linhas não são uniformes: uma lista de conversa combina mensagens curtas e longas, ou um feed tem cartões com conteúdos variados. FixedSizeList não consegue lidar com isso porque pressupõe um único itemSize constante.

Para esses casos, react-window oferece um tipo de lista que permite que cada item declare seu próprio tamanho.

VariableSizeList funciona como FixedSizeList, mas aceita um tamanho específico para cada item. Em vez disso, importe VariableSizeList e forneça uma função que retorne o tamanho para qualquer index informado.

Todo o restante, incluindo a função de renderização children e a propriedade style essencial, permanece igual, portanto a migração é pequena.

Com VariableSizeList, itemSize é uma função que recebe um index e retorna a altura daquela linha em pixels. react-window a chama para calcular os deslocamentos e decidir a janela visível.

Isso permite codificar alturas conhecidas, por exemplo, linhas mais altas para itens com imagens e linhas mais baixas para texto simples.

Se você souber antecipadamente a altura de cada linha, poderá retorná-la diretamente da função itemSize. Se as alturas dependerem do conteúdo renderizado, será necessário medir as linhas depois que forem desenhadas.

Alturas pré-calculadas são mais simples e rápidas; alturas medidas são mais flexíveis, mas exigem trabalho adicional para devolver os tamanhos à lista.

VariableSizeList armazena em cache os deslocamentos dos itens para melhorar o desempenho. Quando uma altura medida muda, você precisa chamar o método resetAfterIndex na ref da lista para que ela recalcule as posições a partir daquele index.

Esquecer disso deixa os deslocamentos desatualizados e as linhas desalinhadas, portanto resetAfterIndex é essencial para fazer a medição dinâmica funcionar.

Existe um problema de ovo e galinha: você precisa de uma altura para renderizar a linha, mas só conhece a altura real depois que ela é renderizada. A lista precisa posicionar a linha antes de poder medi-la.

Para resolver isso, renderize primeiro usando uma estimativa e corrija a posição assim que a altura verdadeira for conhecida.

O padrão usual consiste em renderizar as linhas com uma altura estimada, medir a altura real depois da renderização usando uma ref ou ResizeObserver, armazenar o valor medido e chamar resetAfterIndex para atualizar as posições.

Esse ciclo converge rapidamente, de modo que a lista se estabelece com os deslocamentos corretos após a primeira passagem de medição.

A função itemSize deve permanecer estável entre as renderizações, normalmente sendo envolvida em useCallback, para que a lista não invalide constantemente seus deslocamentos armazenados em cache.

Uma função instável definida diretamente no código pode forçar recálculos desnecessários, prejudicando o desempenho que a virtualização pretende oferecer.

VariableSizeList realiza mais trabalho do que FixedSizeList porque não pode presumir um deslocamento constante e precisa acompanhar os tamanhos de cada item. Quando as alturas são medidas, essa medição adicional também tem um custo.

Para listas cujas linhas realmente variam, esse custo vale a pena; para linhas uniformes, FixedSizeList continua sendo a opção mais rápida e simples.

Se a medição dinâmica exata for muito custosa, às vezes você pode fazer uma aproximação. Agrupar as linhas em algumas classes de altura fixa ou usar uma média razoável pode permitir que você continue usando FixedSizeList.

Isso troca um layout com precisão de pixels por simplicidade e velocidade, um compromisso aceitável quando pequenas imperfeições nos deslocamentos são toleráveis.

Relembre como VariableSizeList descobre a altura de cada linha.

VariableSizeList lida com linhas de alturas diferentes recebendo itemSize como uma função do índice. As alturas podem ser pré-calculadas ou medidas; alturas medidas exigem o ciclo de estimar, renderizar, medir e atualizar com resetAfterIndex.

Mantenha a função itemSize estável com useCallback. Ela custa mais do que FixedSizeList; portanto, para linhas uniformes ou quando uma aproximação for suficiente, prefira a variante fixa.