React Scan - herramienta que escanea apps de React para encontrar automáticamente problemas de rendimiento

• A diferencia de herramientas existentes (Profiler, Why Did You Render?, React Devtools), casi no requiere cambios en el código y ofrece señales visuales simples y una API programable
• Detecta y resalta automáticamente los renderizados que causan problemas de rendimiento, y muestra exactamente qué componentes deben corregirse
• Como es un Javascript simple, se puede integrar en cualquier lugar: etiqueta script, NPM, etc.

Por qué hace falta React Scan

• Optimizar React puede ser complicado
• Intencionalmente, las props de los componentes se comparan por referencia y no por valor. Esto reduce el costo de ejecución del renderizado
• Pero eso también hace que sea fácil provocar renderizados innecesarios por error, lo que puede volver más lenta la app
• Incluso en apps de producción grandes con cientos de desarrolladores, muchas veces la optimización sigue siendo difícil (casos de GitHub, Twitter e Instagram).

En qué React Scan es mejor que React Devtools

• Limitaciones de React Devtools:
  • Al estar diseñado como una herramienta de propósito general, no distingue claramente entre renderizados innecesarios y renderizados necesarios.
  • No tiene una API programable, por lo que es difícil automatizar la depuración de rendimiento.
• Quejas personales sobre la función de resaltado de React Devtools:
  • Retraso en la detección de renderizado: React Devtools procesa los renderizados por lotes, por lo que los componentes que se renderizan rápidamente solo se muestran una vez por segundo.
  • Problemas al actualizar la posición de las cajas: al hacer scroll o cambiar el tamaño, la posición de las cajas no se actualiza.
  • Falta de conteo de renderizados: no muestra cuántas veces se renderiza cada componente.
  • Difícil distinguir los renderizados problemáticos: para identificar renderizados lentos o ineficientes, hay que inspeccionar manualmente los componentes.
  • Experiencia de usuario insuficiente: el menú está oculto, así que activar y desactivar la función es incómodo. La UI no está pensada para depuración de rendimiento.
  • Sin API de programación: no se puede usar para automatizar la depuración ni para tareas avanzadas.
  • Limitado a la extensión de Chrome: no se puede usar en cualquier entorno web y depende de una extensión del navegador.
  • Problemas subjetivos de diseño: los bordes de las cajas se ven borrosos y da la sensación de funcionar con lentitud.
• Qué diferencia a React Scan:
  • Es una herramienta especializada diseñada para depuración de rendimiento, que identifica con claridad los renderizados innecesarios.
  • Se puede usar en todas las plataformas (web, script, npm) y optimiza la experiencia del desarrollador.
  • Con una hoja de ruta de funciones ambiciosa, ofrece el potencial de ir más allá de React Devtools.

[plenty]

Se ve bien y es fácil de entender.

[carnoxen]

Un caso de uso muy apropiado

[kandk]

Tal vez porque la demo es una app pequeña, pero la velocidad de respuesta se siente rápida.