Warum meine React-App bei 5.000 Datensätzen langsam wurde

Ich habe ein React-Feature mit einem durchsuchbaren Dropdown und einer Datentabelle entwickelt.

Während der Entwicklung funktionierte alles einwandfrei. Dann habe ich echte Produktionsdaten geladen. Die App wurde langsam.

Das Dropdown-Menü brauchte Sekunden zum Öffnen. Das Tippen im Suchfeld fühlte sich verzögert an. Die App verbrauchte zu viel Arbeitsspeicher.

Ich musste 5.000 Datensätze verarbeiten. Ich benötigte eine sofortige Suche und flüssiges Scrollen.

So habe ich es gelöst.

  1. useMemo für Berechnungen verwenden Ich habe aufgehört, die Daten bei jedem Render-Vorgang zu filtern. Ich habe useMemo verwendet, um die gefilterte Liste zu speichern. Dies verhindert unnötige CPU-Last.

  2. Debouncing hinzufügen Früher hat jeder Tastendruck eine Suche ausgelöst. Bei großen Listen ist das sehr rechenintensiv. Ich habe ein 300ms-Debouncing hinzugefügt. Jetzt sucht die App erst, wenn der Benutzer mit dem Tippen aufhört.

  3. Virtualisierung implementieren Das war die wichtigste Lösung. Anstatt 5.000 DOM-Elemente zu rendern, habe ich react-window verwendet. Der Browser rendert jetzt nur noch die 20 oder 30 Zeilen, die auf dem Bildschirm sichtbar sind. Das sorgt für flüssiges Scrollen und senkt den Speicherverbrauch.

  4. Re-renders verhindern Ich habe React.memo für die Zeilen-Komponenten verwendet. Außerdem habe ich useCallback für Event-Handler eingesetzt. Dies verhindert, dass sich Child-Komponenten aktualisieren, wenn ihre Daten gleich bleiben.

  5. Server-seitige Pagination verwenden Ich habe aufgehört, alle Benutzer auf einmal abzurufen. Ich bin dazu übergegangen, kleine Seiten mit jeweils 50 Datensätzen abzurufen. Dies führt zu schnelleren API-Antworten und kleineren Datenmengen.

  6. Material UI optimieren MUI Autocomplete ist großartig, hat aber bei riesigen Listen Probleme. Ich habe die angezeigten Optionen auf die ersten 100 Ergebnisse begrenzt, um die Geschwindigkeit beizubehalten.

Die Ergebnisse:

• Dropdown-Geschwindigkeit: Von 5 Sekunden auf unter 500 ms. • Suchreaktion: Von verzögert zu sofortig. • Speicherverbrauch: Signifikante Reduzierung.

Performance-Probleme bleiben während der Entwicklung oft verborgen. Sie treten erst auf, wenn echte Daten auf die Nutzer treffen.

Identifizieren Sie zuerst Ihre Engpässe. Beheben Sie die größten mit Memoization, Virtualisierung und Debouncing.

Welche Optimierung hat Ihren React-Apps am meisten geholfen? Schreiben Sie es mir in die Kommentare.

Quelle: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9