Virtualización: listas de miles sin sudar

Pintar una lista de 10.000 elementos crea 10.000 nodos en el DOM —y el navegador se ahoga: scroll con tirones, memoria disparada—. Pero el usuario solo VE una docena a la vez. La VIRTUALIZACIÓN aprovecha eso: renderiza únicamente las filas visibles (más un pequeño margen) y finge el resto con un espaciador. Hoy la construyes desde cero —tu propio react-window en miniatura, corriendo en vivo con 5.000 elementos fluidos—.

La ventana del tren

Tu propia lista virtualizada (en vivo)

La idea: un contenedor con scroll de altura fija, un espaciador interno de la altura TOTAL (para el scrollbar), y renderizar solo las filas visibles según scrollTop. 5.000 elementos, fluido:

Haz scroll por los 5.000 elementos: fluido, sin tirones. El truco: el <div> espaciador tiene la altura TOTAL (TOTAL * ALTO_FILA) para que la barra de scroll represente toda la lista, pero solo renderizamos las ~${cuantas} filas visibles, posicionadas de forma absoluta en su lugar real (top: item.id * ALTO_FILA). Al hacer scroll, scrollTop cambia, recalculamos qué filas caen en la ventana, y renderizamos ESAS. El DOM nunca tiene más de una docena de filas, aunque la lista "sea" de 5.000. Acabas de construir el corazón de react-window.

Mini-reto

Amplía tu lista virtualizada: 1) agrega una barra de búsqueda que filtre los items por nombre ANTES de virtualizar (recalcula TOTAL según los resultados filtrados); 2) muestra "mostrando X de Y filas reales en el DOM" para hacer visible el ahorro; 3) en un comentario, di a partir de cuántos elementos crees que vale la pena virtualizar y por qué no lo harías para una lista de 30. Comprueba que el scroll sigue fluido con miles de resultados.

Qué sigue

Ya haces tu app rápida. Falta lo que la hace CONFIABLE: los tests. La próxima lección trae el testing de componentes con Testing Library y Vitest —probar tu UI como la usa una persona (clic, escribir, ver), no sus detalles internos—. La red de seguridad de una app de producción.