Mi aplicación React se ha ido volviendo cada vez más lenta durante los últimos meses y no entiendo por qué. Ahora comencé a revisar con Chrome DevTools, pero no entiendo mucho de las métricas de rendimiento. ¿Hay una forma sencilla de encontrar los cuellos de botella?
Inicia tu app con `npm run build` y échale un vistazo al tamaño del bundle - ahí ves enseguida si algún package está inflado. A menudo pasa que importas librerías completas sin darte cuenta, cuando en realidad solo necesitas una función pequeña. Un truco útil: usa Lighthouse en Chrome DevTools, no solo las métricas de rendimiento - te muestra mucho más directamente dónde realmente se atasca, y te da sugerencias concretas de mejora en lugar de solo números crípticos.
El problema más frecuente es el re-renderizado innecesario - echa un vistazo a qué componentes se están renderizando constantemente aunque sus props no hayan cambiado. Con Chrome DevTools puedes usar la pestaña React Profiler, ahí ves exactamente qué componentes tardan más tiempo y con qué frecuencia se renderizan. A menudo ya ayuda `React.memo()` en componentes individuales o `useMemo()` para cálculos costosos, para optimizarlo. Si eso no es suficiente, también podría ser que tu state esté organizado de forma muy centralizada y cada pequeño cambio hace que toda la app se renderice de nuevo - en ese caso te ayudaría Context API o una herramienta de gestión de state como Redux.
Si la app se volvió más lenta durante meses, vale la pena revisar tus dependencias - algunos paquetes crecen con el tiempo o traen más código del que realmente necesitas. Con `npm ls` o `yarn why` puedes verificar qué librerías están instaladas duplicadas o por qué ciertos paquetes están ahí. Por cierto: en Chrome DevTools, en la pestaña Performance, puedes grabar una sesión y verás concretamente dónde la app desperdicia tiempo - fíjate en la actividad del Main Thread, no solo en las métricas individuales.
Antes de que te pierdas demasiado en las Chrome DevTools: generalmente el problema no es el rendimiento del navegador, sino que tu app carga demasiado código o hace demasiadas solicitudes a la API. Es una sorpresa desagradable cuando solo miras los Flame Charts.
Empezaría con dos checks prácticos: Primero, abre la pestaña Network y observa qué tan grandes son tus bundles y cuánto tardan las llamadas a la API. Si hay archivos JavaScript gigantescos por ahí o el servidor tarda una eternidad en responder, entonces ninguna optimización de React te va a ayudar. Segundo, usa `npm outdated` o revisa tu package.json - a veces te instalas sin querer paquetes enormes a través de dependencias que ni siquiera usas activamente. Con `npm ls` también puedes ver qué packages están instalados varias veces.
Si todo eso se ve normal, entonces las React DevTools (el plugin de navegador separado, no las Chrome DevTools) pueden ayudarte: Con ellas ves en vivo qué componentes se renderizan y cuántas veces. Eso es mucho más revelador que cualquier métrica de rendimiento. Busca ahí componentes que se renderizan constantemente aunque sus inputs sean iguales - ese es realmente un culpable muy frecuente.
Iniciar sesiónpara responder.
