React Scan

React Scan es una herramienta ligera de JavaScript que observa una app de React en ejecución y señala los componentes que se vuelven a renderizar más de lo que deberían. React compara las props por referencia, no por valor. Así, un objeto o una función nuevos en cada renderizado se cuelan sin que nadie lo note, y ese error silencioso explica por qué tantas apps de React van lentas aunque el código parezca correcto.

En lugar de adivinar, React Scan dibuja un recuadro alrededor de cada componente mientras se renderiza y lo colorea según cuánto tardó ese renderizado. Cuanto más pesado es el render, más visible es el destello. Tú observas la página, y el culpable se delata solo.

Funciona con montajes sencillos. No reescribes ni un componente. No necesitas un paso de compilación. Esa instalación tan simple es todo el argumento de una herramienta pensada para desarrolladores que ya están metidos de lleno en una pila de configuración de frameworks.

Cómo empezar

1. Ejecuta npx -y react-scan@latest init en tu proyecto. El comando detecta tu framework, instala el paquete y conecta el script por ti.
2. También puedes instalarlo a mano con npm install -D react-scan y colocar la etiqueta de script de unpkg en tu index.html antes que cualquier otro script.
3. Carga tu app en el navegador. Los componentes destellan al renderizarse, con la barra de herramientas sobre la página.
4. Haz clic en los componentes que destellan para ver los recuentos y los tiempos de renderizado, y luego cambia el código que recalcula las props en cada pasada.
5. Desactívalo en producción. Está pensado para ejecutarse en desarrollo, y forzarlo en una compilación activa es algo que la documentación desaconseja.