React Scan

React Scan ist ein leichtgewichtiges JavaScript-Tool, das eine laufende React-App beobachtet und die Komponenten markiert, die öfter neu rendern als nötig. React vergleicht Props per Referenz, nicht per Wert. Ein neues Objekt oder eine neue Funktion bei jedem Render schleicht sich also leicht ein, und dieser stille Fehler erklärt, warum so viele React-Apps träge wirken, obwohl der Code sauber aussieht.

Statt zu raten, zieht React Scan einen Rahmen um jede Komponente, während sie rendert, und schattiert ihn danach, wie lange dieses Rendern gedauert hat. Je schwerer das Rendern, desto sichtbarer das Aufblitzen. Sie beobachten die Seite, und der Übeltäter verrät sich von selbst.

Das Tool läuft mit einfachen Setups. Sie schreiben keine einzige Komponente um. Sie brauchen keinen Build-Schritt. Diese denkbar einfache Installation ist das ganze Argument eines Tools für Entwickler, die schon tief in einem Stapel aus Framework-Konfiguration stecken.

Erste Schritte

1. Führen Sie npx -y react-scan@latest init in Ihrem Projekt aus. Der Befehl erkennt Ihr Framework, installiert das Paket und verdrahtet das Skript für Sie.
2. Oder installieren Sie es manuell mit npm install -D react-scan und setzen Sie das unpkg-Skript-Tag in Ihre index.html vor alle anderen Skripte.
3. Laden Sie Ihre App im Browser. Komponenten blitzen beim Rendern auf, die Toolbar liegt auf der Seite.
4. Klicken Sie auf die aufblitzenden Komponenten, um Render-Zähler und Zeiten zu prüfen, und ändern Sie dann den Code, der die Props bei jedem Durchlauf neu berechnet.
5. Schalten Sie es in der Produktion aus. Es ist für die Entwicklung gebaut, und es in einem Live-Build zu erzwingen, davon rät die Dokumentation ab.