React Scan

Qué es

React Scan es una herramienta de desarrollo open source creada por Aiden Bai (bajo Million Software, Inc.) que detecta automáticamente los problemas de rendimiento de una aplicación React. Resalta visualmente los componentes que se vuelven a renderizar de forma innecesaria, sin que tengas que modificar tu código. Está escrita principalmente en TypeScript y se distribuye con licencia MIT.

Para qué sirve

• Visualizar en tiempo real qué componentes se están re-renderizando y con qué frecuencia.
• Localizar renders innecesarios que degradan el rendimiento de la interfaz.
• Diagnosticar problemas de rendimiento sin instrumentar manualmente cada componente.
• Validar que una optimización (memo, useMemo, useCallback) realmente reduce los renders.

Cuándo usarlo

Útil cuando una aplicación React va lenta o tiene tirones al interactuar y no sabes qué componente lo provoca. A diferencia de React DevTools Profiler, no requiere grabar sesiones ni añadir código: muestra los renders directamente sobre la interfaz mientras usas la app. Es un buen primer paso antes de aplicar optimizaciones manuales o herramientas como el compilador de React.

Ejemplo

Arrancar el escaneo con el CLI sin instalar nada de forma permanente:

npx -y react-scan@latest init

O instalarlo como dependencia de desarrollo y usar la API imperativa:

npm install -D react-scan

import { scan } from 'react-scan';

scan({
  enabled: true,
});

Otra opción para webs sin build es cargarlo mediante una etiqueta de script antes del resto en tu index.html:

<script crossorigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js"></script>

Puntos clave

• No requiere cambios en el código: muestra los renders directamente sobre la interfaz.
• Ofrece varias vías de uso: CLI, paquete npm, etiqueta de script y extensión de navegador.
• API completa con scan(), el hook useScan(), setOptions(), getOptions() y onRender().
• Incluye una barra de herramientas siempre accesible para activar y configurar el escaneo.

Ten en cuenta

Está enfocado exclusivamente en React para web; no contempla React Native. Es una herramienta de diagnóstico durante el desarrollo, no una solución que optimice por ti: detecta los renders, pero la corrección sigue siendo tarea tuya. Recuerda no dejarlo activo en producción.