Hubo un punto en mi carrera donde me di cuenta de algo simple:
estaba optimizando React a ciegas.
Sabía que algunos componentes renderizaban más de lo necesario, intuía que había funciones recreándose sin motivo… pero la mayoría de las veces estaba adivinando.
Y cuando optimizas sin medir, puedes terminar "arreglando" cosas que no estaban rotas.
Fue ahí cuando empecé a usar el Profiler de React, y honestamente, me cambió la forma de entender cómo mis componentes se comportaban en tiempo real.
Este post es justo sobre eso:
cómo aprovechar el Profiler para ver lo que realmente pasa… y no lo que asumimos que pasa.
🧭 El Profiler: una herramienta que todos deberían utilizar
React Developer Tools incluye una pestaña llamada Profiler.
No es tan famosa como el “Components” o el “Hooks”, pero es quizá la más útil cuando quieres mejorar rendimiento.
El Profiler te permite:
- Ver cuántas veces se renderiza un componente
- Ver por qué se renderizó
- Medir el tiempo que tomó cada render
- Entender qué parte del árbol está causando más trabajo
- Comparar renders antes y después de una optimización
Antes de usarlo, mis suposiciones eran eso: suposiciones.
Después, tenía datos concretos.
📌 Cómo empezar a usarlo
- Instala React DevTools (si no lo tienes).
- Abre tu app en modo desarrollo.
- Ve a la pestaña Profiler.
- Haz clic en “Record”.
- Interactúa con la app normalmente.
- Detén la grabación.
Instantáneamente verás una gráfica con barras de colores.
Cada barra representa un render del árbol de componentes.
Si algo se está renderizando demasiado, lo verás ahí, sin necesidad de adivinar.
🔍 Lo que más me ayudó a entender
1. Los "renders silenciosos" existen
Hay componentes que crees que se renderizan una o dos veces… y resulta que van por la décima.
El Profiler muestra exactamente cuántas veces se repintó un componente.
2. No todos los renders son malos
Ver muchos renders no significa que tu app está mal.
Lo que buscas es:
- renders muy frecuentes
- componentes muy costosos
- cascadas innecesarias desde un padre
- o cálculos que duran más de lo razonable
React está diseñado para renderizar mucho sin problemas.
El profiler te dice cuándo sí es un problema.
3. Los patrones "costosos" saltan a la vista
Cosas como:
- funciones recreadas sin necesidad
- arrays y objetos nuevos en cada render
- componentes hijos que dependen demasiado del padre
- llamadas innecesarias a APIs o cálculos
Antes lo intuía.
Ahora puedo señalar exactamente dónde pasa.
🛠️ Un ejemplo práctico
Supongamos que tienes una lista grande:
function List({ items }) {
return items.map(item => <Item key={item.id} item={item} />);
}
Desde fuera todo parece normal.
Pero al perfilar, notas que List se renderiza en cada interacción, incluso una interacción que no tiene nada que ver con la lista.
Ahí empiezas a cuestionarte:
- ¿El estado está en el lugar correcto?
- ¿Estoy pasando props que cambian en cada render?
- ¿Necesito React.memo en Item?
El Profiler te da el tipo de información que no obtienes leyendo código:
qué pasa realmente, no qué crees que pasa.
🚦 Qué sí hacer después de perfilar
- Revisar si un cálculo tarda más de lo esperado
- Identificar componentes que se renderizan demasiado
- Ver si useMemo o React.memo harían una diferencia
- Confirmar si una optimización realmente funcionó
- Ajustar estados que deberían vivir en otros componentes
🛑 Qué NO hacer
- Optimizar algo solo porque aparece muchas veces
- Memoizar todo “por si acaso”
- Añadir useCallback sin que un hijo lo necesite
- Asumir que un render costoso es siempre un problema (no siempre lo es)
📘 Lo más importante que aprendí
El Profiler me ayudó a dejar de programar "por intuición" cuando se trata de performance.
Hoy optimizo menos, pero optimizo mejor.
Ya no dependo de suposiciones:
si un componente está causando problemas, el Profiler me lo confirma.
🏁 Lección aprendida
Si nunca has usado el Profiler de React, te recomiendo dedicarle 10 minutos a explorarlo.
Es una herramienta sencilla, pero te da claridad inmediata sobre cómo realmente funciona tu UI.
En el siguiente post voy a mostrar cómo interpretar una sesión completa del Profiler y cómo convertir esos datos en mejoras concretas.
Nos leemos 👋
Top comments (0)