React Performance-Optimierungs-Checkliste
Langsame Anwendungen schaden Unternehmen.
Sie führen zu hohen Absprungraten und frustrieren Nutzer. Zudem erhöhen sie Ihre Infrastrukturkosten.
Sie benötigen keine komplexen Tricks, um dies zu beheben. Die meisten Geschwindigkeitsprobleme entstehen durch unnötige Arbeit. Nutzen Sie diese Checkliste, um schnellere React-Apps zu entwickeln.
Unnötige Re-renders vermeiden
React ist schnell, aber das Rendern von tausenden zusätzlichen Komponenten ist es nicht.
- Halten Sie Komponenten klein und teilen Sie große auf.
- Verlagern Sie den State näher an die Stelle, an der er verwendet wird.
- Verwenden Sie React.memo nur für Komponenten, die häufig gerendert werden oder rechenintensive Aufgaben ausführen.
- Packen Sie nicht jede winzige Komponente in React.memo. Der Vergleich von Props ist oft teurer als das Rendern selbst.
Rechenintensive Logik bewältigen
- Verwenden Sie useMemo für aufwendige Aufgaben wie das Sortieren oder Filtern von Daten.
- Verwenden Sie useCallback, wenn Sie Funktionen an memoisierte Kinder übergeben.
- Verwenden Sie useCallback nicht für jede einzelne Funktion.
useEffect-Nutzung optimieren
Das beste useEffect ist gar kein useEffect.
- Verwenden Sie useEffect nicht, um einen State basierend auf einem anderen State zu setzen.
- Verwenden Sie stattdessen useMemo für abgeleitete Daten.
- Dies führt zu weniger Renders und saubererem Code.
Intelligenter laden
- Nutzen Sie React.lazy für Code-Splitting.
- Nutzen Sie Suspense, um schwere Teile wie Diagramme oder Karten nur bei Bedarf zu laden.
- Dies verbessert Ihre initiale Ladezeit.
Große Datenmengen verwalten
- Rendern Sie nicht 20.000 Elemente auf einmal.
- Nutzen Sie Bibliotheken wie react-window, um Listen zu virtualisieren.
- Dies stellt sicher, dass Sie nur das rendern, was der Benutzer auf dem Bildschirm sieht.
Assets und State optimieren
- Verwenden Sie WebP oder AVIF für Bilder.
- Nutzen Sie Lazy Loading für Bilder, die noch nicht im Sichtfeld sind.
- Verwenden Sie useRef für Werte, die kein UI-Update auslösen müssen.
- Weniger State bedeutet weniger Renders.
Netzwerkverkehr kontrollieren
- Nutzen Sie Debouncing für Suchleisten, um ständige API-Aufrufe zu verhindern.
- Nutzen Sie Caching-Bibliotheken, um Daten wiederzuverwenden und die Serverlast zu senken.
Die goldene Regel
Messen Sie, bevor Sie optimieren.
- Nutzen Sie den React DevTools Profiler.
- Nutzen Sie Lighthouse, um echte Engpässe zu finden.
- Optimieren Sie keinen Code, der bereits schnell ist.
Bei der Optimierung geht es um Einfachheit. Schreiben Sie zuerst vorhersehbaren Code. Messen Sie als Zweites. Optimieren Sie zuletzt.