CodeForge

React 19 de Cero a Experto / Nivel producción

Rendimiento: medir antes de optimizar

Teoría22 min20 XP

Una app lenta frustra, pero "optimizar por si acaso" produce código enredado sin beneficio. La regla de oro del rendimiento en React —y en todo software— es: MIDE PRIMERO. Encuentra el cuello de botella real con el Profiler, y solo entonces optimiza justo eso. Hoy entiendes por qué React re-renderiza, cómo DIAGNOSTICAR un problema de rendimiento con el Profiler de React DevTools, y qué herramientas tienes para arreglarlo cuando de verdad hace falta.

El médico que examina antes de recetar

Por qué React re-renderiza (repaso)

El Profiler: tu diagnóstico

Las herramientas de optimización

¿Cuál es el enfoque correcto para el rendimiento en React?

Mini-reto

Razona un diagnóstico (en papel): tienes un formulario donde, al escribir en un input, TODA una lista de 500 elementos hermana re-renderiza y se siente lenta. 1) ¿Por qué re-renderiza la lista si sus datos no cambiaron? (pista: el padre re-renderiza en cada tecla). 2) ¿Qué mirarías en el Profiler para confirmarlo? 3) Da dos soluciones posibles ordenadas por preferencia (pista: bajar el estado del input a un componente más pequeño vs memo en la lista). Explica por qué medir primero importa.

Qué sigue

La primera técnica concreta de producción: no hacer que el usuario descargue de golpe TODO el JavaScript de la app cuando solo ve una pantalla. El CODE SPLITTING con lazy y Suspense divide tu app en trozos que se cargan bajo demanda. La próxima lección lo muestra —con demo en vivo—.