React 19 de Cero a Experto / Nivel producción

Reto: optimizar una lista de 10.000 gastos

Reto45 min100 XP

Cierras el módulo de producción con un reto de rendimiento real: tienes 10.000 gastos y una lista que se arrastra. Los harás fluidos con VIRTUALIZACIÓN (renderizar solo lo visible), y encima con búsqueda en vivo —virtualizando los resultados filtrados—. Aplicas todo el pensamiento de rendimiento del módulo: medir el problema (miles de nodos), aplicar la técnica justa (windowing), y verificar la mejora. Cuando termines, ninguna lista larga te asustará.

Reto

Lista virtualizada con búsqueda

Difícil45 min100 XP(×2 sin mirar la solución)

Qué debes construir

Una lista de 10.000 gastos, virtualizada y con búsqueda:

10.000 gastos generados en memoria (id, nombre, valor, categoría).
Virtualización: renderizar solo las filas visibles según el scroll, con un espaciador de la altura total (como en la lección de virtualización).
Búsqueda en vivo: un input que filtra los gastos por nombre; la lista virtualizada muestra solo los resultados (y el scrollbar se ajusta al número de resultados).
Contador visible: "mostrando N resultados · ~M filas en el DOM" para hacer patente el ahorro.

Reglas

El DOM nunca debe tener más de ~15-20 filas, sin importar cuántos gastos haya.
El filtrado ocurre ANTES de virtualizar (virtualizas la lista filtrada).
Todo tipado; scroll fluido con 10.000 elementos y con resultados filtrados.

45:00

Cuando estés listo, arranca el reloj.

Lo que este reto consolida:

Medir el problema: 10.000 nodos en el DOM ahogan al navegador; el usuario solo ve ~10. Ese desajuste ES el problema, y la virtualización es la técnica exacta para él.
Filtrar y luego virtualizar: se derivan los resultados (módulo 3: lo derivado se calcula), y la virtualización opera sobre ellos. Componer dos técnicas sin que se estorben.
useMemo donde SÍ importa: generar 10.000 objetos en cada tecla sería un desperdicio real —aquí memoizar los datos base está justificado (módulo 1: medir antes; este es un caso claro)—.

Autoevaluación: haz scroll por los 10.000 gastos —¿fluido? Busca "Gasto 500" —¿filtra al instante y la lista virtualiza los resultados? Fíjate en el contador: "solo ~15 filas en el DOM" aunque haya 10.000 gastos. Usa indiceReal para posicionar cada fila en su lugar absoluto real. Comparado con renderizar los 10.000 (que colgaría el navegador), aquí el DOM se mantiene liviano sin importar la cantidad. Has aplicado el pensamiento completo de rendimiento: identificar el problema (demasiados nodos), aplicar la técnica exacta (virtualización + useMemo donde importa), y ver el ahorro medible.

Qué sigue

Módulo 10 conquistado: tu React es de PRODUCCIÓN —rápido (rendimiento, code splitting, virtualización), confiable (testing) y ordenado (arquitectura por features)—. Has recorrido React 19 completo: componentes, estado, efectos, datos, estado global, routing, formularios, tiempo real y producción. Solo queda una cosa: JUNTARLO TODO. El módulo 11 es el proyecto final —un chat colaborativo en tiempo real— donde cada pieza que dominaste cobra sentido en una app real de principio a fin.