VariableSizeList: alturas de fila dinámicas

A veces las filas no son uniformes: una lista de chat combina mensajes cortos y largos, o un feed contiene tarjetas con cantidades de contenido variables. FixedSizeList no puede gestionar este caso porque presupone un único itemSize constante.

Para estos casos, react-window ofrece un tipo de lista que permite que cada elemento declare su propio tamaño.

VariableSizeList funciona como FixedSizeList, pero admite un tamaño específico para cada elemento. En su lugar, debe importarlo y proporcionar una función que devuelva el tamaño para un índice determinado.

Todo lo demás, incluida la función de renderizado children y la prop style crítica, permanece igual, por lo que la migración es pequeña.

Con VariableSizeList, itemSize es una función que recibe un índice y devuelve la altura de esa fila en píxeles. react-window la llama para calcular los desplazamientos y decidir cuál es la ventana visible.

Esto permite codificar alturas conocidas; por ejemplo, filas más altas para elementos con imágenes y filas más cortas para texto sin formato.

Si conoce de antemano la altura de cada fila, puede devolverla directamente desde la función itemSize. Si las alturas dependen del contenido renderizado, debe medir las filas después de que se pinten.

Las alturas calculadas previamente son más sencillas y rápidas; las alturas medidas son más flexibles, pero requieren trabajo adicional para devolver los tamaños a la lista.

VariableSizeList almacena en caché los desplazamientos de los elementos para mejorar el rendimiento. Cuando cambia una altura medida, debe llamar al método resetAfterIndex de la lista mediante su ref para que vuelva a calcular las posiciones desde ese índice en adelante.

Si lo olvida, quedarán desplazamientos obsoletos y las filas se desalinearán, por lo que resetAfterIndex es la clave para que funcione la medición dinámica.

Existe un problema del tipo qué fue primero: necesita una altura para renderizar la fila, pero solo conoce la altura real después de renderizarla. La lista debe colocar una fila antes de poder medirla.

Para resolverlo, primero debe renderizarla con una estimación y corregir la posición cuando conozca la altura real.

El patrón habitual consiste en renderizar las filas con una altura estimada, medir su altura real después de pintarlas mediante un ref o ResizeObserver, guardar el valor medido y llamar a resetAfterIndex para actualizar las posiciones.

Este ciclo converge rápidamente, por lo que la lista termina teniendo los desplazamientos correctos después de la primera pasada de medición.

La función itemSize debe ser estable entre renderizados, normalmente envolviéndola en useCallback, para que la lista no invalide constantemente sus desplazamientos almacenados en caché.

Una función inestable definida directamente dentro del componente puede forzar recálculos innecesarios y perjudicar el rendimiento que la virtualización pretende proporcionar.

VariableSizeList hace más trabajo que FixedSizeList porque no puede asumir un desplazamiento constante y debe llevar un registro de los tamaños de cada elemento. Cuando se miden las alturas, esa medición adicional también añade coste.

En las listas cuyas filas realmente tienen alturas diferentes, este coste merece la pena; para las filas uniformes, FixedSizeList sigue siendo la opción más rápida y sencilla.

Si la medición dinámica exacta resulta demasiado costosa, en ocasiones puede aproximarla. Agrupar las filas en unas pocas clases de altura fija o usar una media razonable puede permitirle seguir utilizando FixedSizeList.

Esto cambia un diseño perfecto al píxel por simplicidad y velocidad: un compromiso aceptable cuando se toleran pequeñas imperfecciones en los desplazamientos.

Recuerde cómo VariableSizeList obtiene la altura de cada fila.

VariableSizeList gestiona filas de distintas alturas tomando itemSize como una función del índice. Las alturas pueden calcularse de antemano o medirse; las alturas medidas requieren el ciclo de estimar, renderizar, medir y actualizar con resetAfterIndex.

Mantenga estable la función itemSize con useCallback. Tiene un coste mayor que FixedSizeList, así que para filas uniformes o cuando basta con una aproximación, prefiera la variante fija.