Repolode
Enviar
aidenybai

aidenybai/react-scan

Herramienta de rendimiento para React que detecta y resalta automáticamente los componentes que provocan renderizados innecesarios, sin necesidad de cambiar el código.

Ver en GitHubSitio web
Estrellas
21,877
Forks
391
Issues abiertos
77
Último commit
hace 2 meses

¿Qué es?

React Scan detecta problemas de rendimiento en aplicaciones React al observar los renderizados y resaltar los componentes que se vuelven a renderizar innecesariamente. Se integra con una sola etiqueta de script o mediante un paquete npm, así que funciona sin modificar el código de la aplicación.

La herramienta aborda un problema frecuente en React: las props se comparan por referencia, por lo que los objetos, las funciones o los estilos definidos en línea y pasados a componentes secundarios pueden provocar renderizados que no hacen ningún trabajo útil. React Scan muestra estos casos directamente en la página y mantiene disponible una barra de herramientas para inspeccionarlos.

Ofrece una función imperativa `scan`, un hook `useScan` y un hook `onRender` para observar un componente específico. Las guías de integración cubren Script Tag, Next.js (App Router y Pages Router), Vite y Remix. También incluye una extensión para el navegador.

Funciones clave

  • 01Resalta en la página los componentes que se vuelven a renderizar innecesariamente
  • 02No requiere cambios en el código si se integra mediante una etiqueta de script
  • 03Ofrece una barra de herramientas en la página para inspeccionar los renderizados
  • 04Proporciona las API `scan`, `useScan` y `setOptions` para el control programático
  • 05Permite observar los renderizados de un componente específico con `onRender`
  • 06Incluye una extensión para el navegador y guías de configuración para frameworks

Casos de uso

  • Encontrar renderizados innecesarios en una aplicación React de una sola página que funciona con lentitud
  • Comprobar qué componentes se vuelven a renderizar tras un cambio de estado durante el desarrollo
  • Auditar un proyecto de Next.js o Remix para detectar trabajo de renderizado innecesario
  • Seguir los renderizados de un solo componente con el hook `onRender`

Inicio rápido

  1. 1

    Ejecuta el comando init para detectar automáticamente tu framework y configurar React Scan

    npx -y react-scan@latest init
  2. 2

    O instala el paquete manualmente mediante npm

    npm install -D react-scan
  3. 3

    Añade la etiqueta script a tu aplicación (por ejemplo, en index.html, antes de cualquier otro script)

Antes de usarlo

  • El README recomienda React Doctor como sucesor, por lo que React Scan podría recibir menos atención en su desarrollo.
  • La configuración manual requiere añadir una etiqueta script o código específico del framework, y el script se carga desde unpkg.com.

Temas

#react#performance#rendering#debugging#javascript#frontend-tooling#react-dom#react-scan

Preguntas frecuentes

¿Qué es react-scan?
Herramienta de rendimiento para React que detecta y resalta automáticamente los componentes que provocan renderizados innecesarios, sin necesidad de cambiar el código. React Scan detecta problemas de rendimiento en aplicaciones React al observar los renderizados y resaltar los componentes que se vuelven a renderizar innecesariamente. Se integra con una sola etiqueta de script o mediante un paquete npm, así que funciona sin modificar el código de la aplicación.
¿react-scan es gratuito? ¿Qué licencia tiene?
react-scan es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-scan sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de react-scan fue el 16 ago 2026.
¿Para qué puedo usar react-scan?
Encontrar renderizados innecesarios en una aplicación React de una sola página que funciona con lentitud Comprobar qué componentes se vuelven a renderizar tras un cambio de estado durante el desarrollo Auditar un proyecto de Next.js o Remix para detectar trabajo de renderizado innecesario Seguir los renderizados de un solo componente con el hook `onRender`
¿Cómo se instala react-scan?
Ejecuta el comando init para detectar automáticamente tu framework y configurar React Scan: npx -y react-scan@latest init O instala el paquete manualmente mediante npm: npm install -D react-scan Añade la etiqueta script a tu aplicación (por ejemplo, en index.html, antes de cualquier otro script)
¿Dónde consigo react-scan?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/aidenybai/react-scan

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados