Tenho uma lista com alguns milhares de produtos, e quando faço scroll a aplicação começa a ficar muito lenta. Tentei virtualização comum, mas não ajuda muito. Talvez exista alguma abordagem moderna que estou perdendo?
E aí, você já fez um profile da aplicação direito, ou está chutando? Porque se a virtualização não tá ajudando, as lags provavelmente vêm do fato de que você tá re-renderizando a lista inteira toda vez que o state muda - mesmo que só tenha 20 elementos visíveis, o React pode estar recalculando os dados para os 5000 inteiros. Tenta envolver os componentes de linha com `React.memo` e se certifica que você não tá criando novas funções-handler a cada render (usa `useCallback`).
Primeiro - esquece da virtualização comum, se não está ajudando, significa que o problema provavelmente não é na renderização, mas no fato de que você está carregando muitos dados de uma vez só ou recalculando eles a cada scroll. Verifica se você está usando `memo`, `useMemo` e `useCallback` corretamente - frequentemente acontece que componentes se recalculam à toa. Também é útil perfilar a aplicação através do React DevTools Profiler para ver exatamente onde está o gargalo: pode ser que o problema esteja na renderização da lista em si, ou pode ser que a cada scroll você esteja fazendo requisições pro servidor ou recalculando uma lógica complexa.
Se a virtualização já está sendo usada, tenta aumentar o tamanho da janela de renderização (overscan) ou muda pra paginação em vez de scroll infinito - às vezes é simplesmente mais fácil e mais rápido.
Foca na memoização de seletores e funções de callback - muitas vezes os travamentos não vêm da renderização em si, mas do fato de que a cada scroll os filtros são recalculados, a ordenação é refeita ou novas funções são criadas para os manipuladores! Tenta envolver os seletores em `useSelector` com comparação adequada ou usa `useMemo` para cálculos - isso pode dar um ganho de desempenho muito maior do que apenas virtualização.
Verifica quantos data-atributos e classes tu colocas em cada elemento da lista. Frequentemente os travamentos não vêm da quantidade de nós DOM, mas do fato de o navegador ficar recalculando estilos e layout por causa das mudanças de classes durante o scroll. Se tu adiciona classes dinamicamente para o elemento ativo ou hover, isso pode virar um gargalo. Tenta mover isso para CSS usando `nth-child` ou uma camada separada através de `position: fixed`, pra o navegador não mexer na lista principal.
Segundo ponto - garante que tu não está criando novos objetos nos props a cada renderização. Por exemplo, se tu passa `style={{ color: item.color }}` em vez de um valor pré-calculado, React vai ver objetos diferentes e vai re-renderizar o componente. Mesmo com memoização isso pode desacelerar. Melhor preparar os estilos com antecedência ou usar variáveis CSS.
E mais uma coisa: se a lista tem milhares de elementos, até mesmo virtualização pode ficar lenta se tu cria muitos nós DOM na viewport ao mesmo tempo. Tenta reduzir a quantidade de linhas renderizadas de uma vez - mostra só a parte visível mais um pequeno buffer acima e abaixo. Na maioria das bibliotecas de virtualização isso se configura através de um parâmetro tipo `overscanRowCount`.
Na verdade, a virtualização geralmente funciona bem, então se realmente ajuda com a renderização, os lags estão vindo de outro lugar. Um problema comum que as pessoas deixam passar: você pode ter um problema com scroll infinito e carregamento de dados. Se a cada scroll você faz uma requisição nova de itens do backend e não cacheia os resultados, o navegador trava não por causa dos nós do DOM, mas por causa de delays de rede e parsing de JSON.
Segundo, o que vale a pena verificar é se você configurou corretamente os próprios tamanhos da virtualização. Muitas vezes as pessoas definem uma altura muito pequena pro elemento no config, e aí a biblioteca tipo react-window começa a recalcular os elementos visíveis praticamente a cada pixel de scroll. Tenta aumentar o buffer e especificar explicitamente a altura da linha, em vez de confiar no cálculo automático.
Entrarpara responder.
