react-window

react-window fournit des composants React pour le rendu de grands ensembles de données tout en évitant le coût de performance lié à la création d'éléments pour chaque élément à la fois. Il propose deux composants principaux : List pour les données comportant de nombreuses lignes, et Grid pour les données comportant de nombreuses lignes et colonnes. Le composant List nécessite un rowComponent, rowCount, rowHeight et rowProps. Les hauteurs de ligne peuvent être spécifiées en pixels, en pourcentages, en fonctions d'un index et des props de cellule, ou via un cache de hauteur de ligne dynamique provenant de useDynamicRowHeight. La documentation note que les hauteurs dynamiques sont moins efficaces que les tailles prédéterminées. Les fonctionnalités optionnelles incluent le rendu overscan, les clés de ligne personnalisées, les rappels de redimensionnement et de plage visible, la hauteur par défaut pour le rendu serveur, les classes CSS et styles personnalisés, les remplacements d'élément racine, et une API ref impérative pour le défilement et l'accès au DOM. Le composant Grid nécessite cellComponent, cellProps, columnCount, columnWidth, rowCount et rowHeight. Les tailles de colonnes et de lignes peuvent être des valeurs en pixels, des pourcentages ou des fonctions, mais contrairement aux lignes de List, les tailles de cellules de Grid doivent être déterminables sans rendu. Grid prend également en charge l'overscan dans les deux directions, les clés de lignes et colonnes personnalisées, le texte directionnel, les dimensions par défaut pour le rendu serveur, les rappels de redimensionnement et de cellules rendues, les enfants de superposition ou d'infobulles, et les refs impératives de grille. Le package est installé depuis npm avec "npm install react-window", et les définitions TypeScript sont incluses dans la distribution publiée. La documentation est disponible sur react-window.vercel.app, avec une documentation séparée pour la version 1.x. Le README décrit l'utilisation dans des projets incluant React DevTools et le navigateur Replay, mais ne formule pas de revendications spécifiques de benchmarks de performance.