React Scan
lastmod 2024-11-27created 2024-11-271 edits
Scan for React performance issues and eliminate slow renders in your app
A tool that scans React apps and finds performance problems automatically
About
- Unlike existing tools (Profiler, Why Did You Render?, React Devtools), it needs almost no code changes and offers simple visual cues and a programmable API
- Automatically detects and highlights renders that cause performance problems, and shows exactly which components need fixing
- It is plain Javascript, so you can drop it in anywhere: Script tag, NPM, etc.
Why React Scan is needed
- Optimizing React can be tricky
- By design, component props are compared by reference, not by value. This keeps rendering cheap
- However, this makes it easy to trigger unnecessary renders by accident, which can slow the app down
- Even large production apps with hundreds of developers often struggle with optimization (GitHub, Twitter, Instagram cases).
How React Scan is better than React Devtools
- Limitations of React Devtools:
- Designed as a general-purpose tool, so it does not clearly distinguish unnecessary renders from necessary ones.
- No programmable API, so automating performance debugging is hard.
- Delayed render detection: React Devtools batches renders, so fast-rendering components are shown only once per second.
- Box position update issue: box positions do not update when you scroll or resize.
- No render count: does not show how many times each component rendered.
- Hard to spot problem renders: you have to inspect components yourself to find slow or inefficient renders.
- Poor user experience: the menu is hidden, so toggling the feature is cumbersome. The UI is not designed for performance debugging.
- No programmatic API: cannot be used to automate debugging or for advanced tasks.
- Limited to a Chrome extension: cannot be used anywhere on the web and depends on a browser extension.
- Subjective design issues: box outlines are faint and feel sluggish.
- A specialized tool designed for performance debugging that clearly identifies unnecessary renders.
- Usable on every platform (web, script, npm), with an optimized developer experience.
- An ambitious feature roadmap that offers possibilities beyond React Devtools.