VariableSizeList : hauteurs de lignes dynamiques

Les lignes ne sont pas toujours uniformes : une liste de discussion peut mélanger des messages courts et longs, ou un flux peut contenir des cartes dont le contenu varie. FixedSizeList ne peut pas gérer ce cas, car il suppose une seule propriété itemSize constante.

Pour ces situations, react-window propose un type de liste qui permet à chaque élément de définir sa propre taille.

VariableSizeList fonctionne comme FixedSizeList, mais accepte une taille propre à chaque élément. Vous l’importez à la place et fournissez une fonction qui renvoie la taille pour un indice donné.

Tout le reste, notamment la fonction de rendu et l’indispensable propriété de style, reste identique ; la migration est donc limitée.

Avec VariableSizeList, itemSize est une fonction qui reçoit un indice et renvoie la hauteur de cette ligne en pixels. react-window l’appelle pour calculer les décalages et déterminer la fenêtre visible.

Vous pouvez ainsi décrire les hauteurs connues, par exemple en prévoyant des lignes plus hautes pour les éléments contenant des images et des lignes plus courtes pour le texte brut.

Si vous connaissez à l’avance la hauteur de chaque ligne, vous pouvez la renvoyer directement depuis la fonction itemSize. Si les hauteurs dépendent du contenu rendu, vous devez mesurer les lignes après leur affichage.

Les hauteurs précalculées sont les plus simples et les plus rapides ; les hauteurs mesurées sont plus flexibles, mais demandent un travail supplémentaire pour renvoyer les tailles à la liste.

VariableSizeList met en cache les décalages des éléments pour améliorer les performances. Lorsqu’une hauteur mesurée change, vous devez appeler la méthode resetAfterIndex sur sa référence afin qu’elle recalcule les positions à partir de cet indice.

Si vous l’oubliez, les décalages obsolètes désalignent les lignes ; resetAfterIndex est donc essentiel au bon fonctionnement des mesures dynamiques.

Un problème de type « l’œuf ou la poule » se pose : vous avez besoin d’une hauteur pour rendre la ligne, mais vous ne connaissez sa hauteur réelle qu’après son rendu. La liste doit positionner une ligne avant de pouvoir la mesurer.

Pour résoudre ce problème, commencez par effectuer le rendu avec une estimation, puis corrigez la position lorsque la hauteur réelle est connue.

Le modèle standard consiste à rendre les lignes avec une hauteur estimée, à mesurer leur hauteur réelle après l’affichage au moyen d’une référence ou de ResizeObserver, à enregistrer la valeur mesurée, puis à appeler resetAfterIndex pour mettre à jour les positions.

Cette boucle converge rapidement : après le premier passage de mesure, la liste finit par utiliser les bons décalages.

La fonction itemSize doit rester stable d’un rendu à l’autre, généralement en étant enveloppée dans useCallback, afin que la liste n’invalide pas constamment ses décalages mis en cache.

Une fonction instable définie directement dans le rendu peut imposer des recalculs inutiles et nuire aux performances que la virtualisation est censée offrir.

VariableSizeList effectue davantage de travail que FixedSizeList, car elle ne peut pas supposer un décalage constant et doit suivre la taille de chaque élément. Lorsque les hauteurs sont mesurées, cette mesure supplémentaire a également un coût.

Pour les listes dont les lignes ont effectivement des hauteurs différentes, ce coût est justifié ; pour les lignes uniformes, FixedSizeList reste le choix le plus rapide et le plus simple.

Si la mesure dynamique exacte est trop coûteuse, vous pouvez parfois l’approximer. Regrouper les lignes en quelques catégories de hauteurs fixes ou utiliser une moyenne raisonnable peut vous permettre de conserver FixedSizeList.

Vous échangez ainsi une mise en page parfaite au pixel près contre davantage de simplicité et de rapidité, un compromis acceptable lorsque de légères imperfections de décalage sont tolérables.

Rappelez-vous comment VariableSizeList apprend la hauteur de chaque ligne.

VariableSizeList gère les lignes de hauteurs différentes en prenant itemSize sous forme d’une fonction de l’indice. Les hauteurs peuvent être calculées à l’avance ou mesurées ; les hauteurs mesurées nécessitent la boucle estimation-rendu-mesure-mise à jour avec resetAfterIndex.

Conservez la fonction itemSize avec useCallback. Elle coûte plus cher que FixedSizeList ; pour les lignes uniformes ou lorsque l’approximation suffit, préférez donc la variante à taille fixe.