How To Debug React Apps Like A Senior Developer

Summary

En este video, se explora cómo utilizar las herramientas de desarrollo de React para optimizar el rendimiento de las aplicaciones. Se cubren aspectos esenciales como la personalización del árbol de componentes, la visualización del perfil de rendimiento y la identificación de cuellos de botella durante las re-renderizaciones. Además, se enseña cómo usar el profiler para medir el tiempo de renderización de los componentes, ajustar la configuración de la herramienta y analizar datos de rendimiento a través de gráficos y líneas de tiempo. Este tutorial proporciona valiosos consejos para mejorar la eficiencia y el desempeño en aplicaciones React.

Takeaways

• 😀 La herramienta de React DevTools permite inspeccionar el estado, las props y las actualizaciones de los componentes en tiempo real.
• 😀 Puedes expandir o contraer el árbol de componentes para ver cómo se organizan y renderizan, lo que facilita la depuración.
• 😀 El análisis de rendimiento en React se puede hacer usando el perfilador, que muestra las razones por las cuales los componentes se vuelven a renderizar.
• 😀 Puedes ocultar componentes específicos en el árbol de componentes de acuerdo a sus nombres o tipos para simplificar la vista.
• 😀 La función de 'start profiling' muestra en detalle los tiempos de renderizado y los componentes afectados por los cambios de estado o props.
• 😀 El perfilador permite ver qué componentes son más lentos para renderizar, lo que ayuda a identificar cuellos de botella en el rendimiento.
• 😀 La vista de gráfico de llamas ('flame graph') te permite identificar de forma visual los componentes más lentos de la aplicación.
• 😀 El perfilador también tiene una vista de línea de tiempo que muestra los detalles del ciclo de vida de las actualizaciones de estado y las re-renderizaciones.
• 😀 Puedes filtrar y ocultar eventos que duren menos de un umbral de tiempo determinado, como por ejemplo, eventos que tomen menos de 10 ms.
• 😀 La opción de simular un rendimiento más bajo te permite probar la aplicación bajo condiciones de recursos limitados, útil para dispositivos móviles o equipos más lentos.
• 😀 Al activar la opción de 'record why each component rendered', se puede ver con precisión qué cambio causó la renderización de cada componente.

Q & A

¿Cuál es la función principal del 'React DevTools'?

La función principal de 'React DevTools' es permitir a los desarrolladores inspeccionar y depurar aplicaciones React, mostrando el estado y las propiedades de los componentes, el árbol de componentes, y ayudando a identificar problemas de rendimiento como renders innecesarios.

¿Qué se puede configurar en las 'Settings' de React DevTools?

En las 'Settings' de React DevTools se pueden configurar opciones como la expansión automática de los componentes en el árbol, la visualización de los hooks, la opción de abrir el código en VS Code, y la capacidad de ocultar ciertos componentes como los nodos DOM o componentes de alto orden.

¿Por qué se recomienda dejar desactivada la opción para mostrar todos los hooks?

Se recomienda dejar desactivada la opción para mostrar todos los hooks porque puede ralentizar la apertura de la herramienta, especialmente en aplicaciones grandes con muchos hooks.

¿Cómo ayuda la opción para abrir el código directamente en el editor de VS Code?

La opción para abrir el código directamente en VS Code agrega un botón en React DevTools que, al ser presionado, abre el archivo correspondiente en VS Code, facilitando la navegación al lugar exacto donde está definido el código relacionado con un componente.

¿Qué sucede si se desactiva la opción para ocultar los nodos DOM en React DevTools?

Si se desactiva la opción para ocultar los nodos DOM, React DevTools mostrará todos los elementos del DOM, como etiquetas H1 y botones, con sus propiedades, lo que puede hacer que el árbol de componentes sea más difícil de manejar, pero proporciona información más detallada.

¿Qué es el 'Profiler' y cómo se usa?

El 'Profiler' es una herramienta en React DevTools que permite medir el rendimiento de la aplicación, mostrando qué componentes se renderizan y cuánto tiempo tardan en hacerlo. Se activa con un botón de 'Start Profiling', y al interactuar con la aplicación, se puede observar cómo cambia el estado y los renders asociados.

¿Qué información se obtiene al usar el 'Profiler' en React DevTools?

El 'Profiler' muestra información sobre los tiempos de renderización de los componentes, las razones de los re-renders (por ejemplo, cambios en el estado o en las props), y permite ver la jerarquía de los componentes renderizados. También muestra gráficos y tablas que ayudan a identificar componentes lentos.

¿Cómo se utiliza el gráfico de llamas ('Flame Graph') en el 'Profiler'?

El gráfico de llamas ('Flame Graph') en el 'Profiler' muestra los componentes que han tardado más tiempo en renderizarse, lo que permite identificar los cuellos de botella en el rendimiento. Los componentes más lentos aparecerán en la parte superior del gráfico.

¿Qué es la opción 'Record why each component rendered' y por qué es útil?

La opción 'Record why each component rendered' permite ver exactamente por qué se renderizó un componente, ya sea por un cambio en las props, el estado o alguna otra causa. Esto es útil para entender y solucionar problemas relacionados con renders innecesarios o inesperados.

¿Cómo se puede mejorar la simulación de dispositivos de bajo rendimiento en React DevTools?

React DevTools permite simular dispositivos de bajo rendimiento limitando el uso de la CPU y la cantidad de hilos disponibles. Esto ayuda a los desarrolladores a ver cómo su aplicación se comporta en dispositivos con recursos limitados, permitiendo identificar posibles problemas de rendimiento en esos contextos.