React Academy · Lección

Uso de la pestaña Profiler

Grabe renderizados, lea gráficos de llamas e identifique componentes lentos.

Uso de la pestaña Profiler es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenido

En esta lección usará React DevTools Profiler para grabar renderizaciones, leer gráficos de llamas e identificar qué componentes están provocando cuellos de botella de rendimiento.

Apertura de Profiler

Haga clic en la pestaña **Profiler** de React DevTools (junto a Components). Verá un botón Record (círculo) y un botón Reload and Profile. El profiler solo funciona en modo de desarrollo.

Grabación de una sesión

Haga clic en **Record** (el círculo), interactúe con su aplicación (por ejemplo, haga clic en un botón o escriba en un campo de entrada) y, después, haga clic en **Stop** (el cuadrado). DevTools captura cada renderización que se produjo durante la sesión.

Lectura del gráfico de llamas

El gráfico de llamas muestra una barra por componente y por commit. Ancho = tiempo dedicado a renderizar. Las pilas altas = árboles de componentes profundos. Pase el cursor sobre una barra para ver el nombre del componente y la duración exacta de la renderización.

Línea de tiempo de commits

En la parte superior de Profiler verá una fila de barras pequeñas, una por cada commit de React. Las barras más altas representan commits más lentos. Haga clic en una barra para ir al gráfico de llamas de ese commit.

¿Por qué se renderizó un componente?

Seleccione un componente en el gráfico de llamas y consulte la sección **¿Por qué se renderizó esto?**. Ahí se muestra si el componente se renderizó porque cambiaron las props, cambió el estado o se volvió a renderizar un componente padre.

Barras grises y de colores

Las barras grises indican que el componente **no** se renderizó en este commit (React reutilizó el resultado anterior). Las barras de colores indican que sí se volvió a renderizar; los colores más oscuros representan tiempos de renderizado más largos.

La vista de gráfico clasificado

Cambie de Flame Graph al gráfico **Ranked** (mediante el selector de la parte superior). Esta vista muestra todos los componentes renderizados ordenados por tiempo de renderizado, lo que permite identificar de inmediato el componente más lento.

Grabar y recargar

Haga clic en **Reload and Profile** en lugar de Record para capturar la carga de la página, incluidos los renderizados iniciales. Esto le ayuda a encontrar los componentes que son lentos durante el primer montaje.

Habilitar el profiling en producción

Las compilaciones de producción deshabilitan Profiler de forma predeterminada. Para hacer profiling en producción, compile usando `react-dom/profiling` como alias y `scheduler/tracing-profiling`. La mayoría de los equipos hacen primero profiling en desarrollo.

Comprobación rápida

En el gráfico de llamas de React DevTools Profiler, ¿qué representa el ancho de una barra?

Resumen

Ahora puede grabar una sesión de profiling, leer gráficos de llamas y gráficos clasificados, comprobar por qué un componente se volvió a renderizar y usar la línea de tiempo de commits para desplazarse entre los renderizados.

A continuación

Siguiente lección: **Depuración de errores comunes de React** — diagnosticará advertencias por claves faltantes, errores de estado `undefined` y discrepancias de hidratación mediante DevTools y la consola del navegador.

Preguntas frecuentes

¿La lección «Uso de la pestaña Profiler» es gratis?

Sí — el texto completo de «Uso de la pestaña Profiler» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Uso de la pestaña Profiler»?

Grabe renderizados, lea gráficos de llamas e identifique componentes lentos. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Uso de la pestaña Profiler»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Instalación y apertura de React DevTools
Inspección de árboles de componentes y props
Uso de la pestaña Profiler
Depuración de errores comunes de React

← Volver a React Academy