react-window

react-window fornece componentes React para renderizar grandes conjuntos de dados, evitando o custo de desempenho de criar elementos para cada item de uma só vez. Oferece dois componentes principais: List para dados com muitas linhas e Grid para dados com muitas linhas e colunas. O componente List requer rowComponent, rowCount, rowHeight e rowProps. As alturas das linhas podem ser especificadas como pixels, porcentagens, funções de um índice e props de célula, ou um cache dinâmico de altura de linha de useDynamicRowHeight. A documentação observa que alturas dinâmicas são menos eficientes que tamanhos predeterminados. Recursos opcionais incluem renderização de overscan, chaves de linha personalizadas, callbacks de redimensionamento e intervalo visível, altura padrão para renderização no servidor, classes e estilos CSS personalizados, substituições do elemento raiz e uma API ref imperativa para rolagem e acesso ao DOM. O componente Grid requer cellComponent, cellProps, columnCount, columnWidth, rowCount e rowHeight. Os tamanhos de colunas e linhas podem ser valores em pixels, porcentagens ou funções, mas, diferentemente das linhas do List, os tamanhos das células do Grid devem ser determináveis sem renderização. O Grid também suporta overscan em ambas as direções, chaves personalizadas de linhas e colunas, texto direcional, dimensões padrão para renderização no servidor, callbacks de redimensionamento e células renderizadas, overlays ou filhos de tooltip e refs imperativas de grid. O pacote é instalado a partir do npm com "npm install react-window", e as definições TypeScript estão incluídas na distribuição publicada. A documentação está disponível em react-window.vercel.app, com documentação separada da versão 1.x. O README descreve o uso em projetos incluindo React DevTools e o navegador Replay, mas não faz alegações específicas de benchmarks de desempenho.