Dlaczego moja aplikacja React zwolniła przy 5 000 rekordów

Dlaczego moja aplikacja React zwolniła przy 5 000 rekordów

Stworzyłem funkcjonalność w React z listą rozwijaną z wyszukiwarką i tabelą danych.

Podczas developmentu wszystko działało poprawnie. Potem załadowałem rzeczywiste dane produkcyjne. Aplikacja zwolniła.

Otwarcie listy rozwijanej zajmowało sekundy. Wpisywanie tekstu w pole wyszukiwania było opóźnione. Aplikacja zużywała zbyt dużo pamięci.

Musiałem obsłużyć 5 000 rekordów użytkowników. Potrzebowałem błyskawicznego wyszukiwania i płynnego przewijania.

Oto jak to naprawiłem.

1. Użyj useMemo do obliczeń Przestałem filtrować dane przy każdym renderowaniu. Użyłem useMemo, aby przechowywać przefiltrowaną listę. Zapobiega to niepotrzebnemu obciążaniu procesora.

2. Dodaj Debouncing Każde naciśnięcie klawisza wywoływało wyszukiwanie. Przy dużych listach jest to kosztowne. Dodałem 300ms debounce. Teraz aplikacja wyszukuje dopiero po tym, jak użytkownik przestanie pisać.

3. Wdróż wirtualizację To była najważniejsza poprawka. Zamiast renderować 5 000 elementów DOM, użyłem react-window. Przeglądarka renderuje teraz tylko 20 lub 30 wierszy widocznych na ekranie. Dzięki temu przewijanie jest płynne, a zużycie pamięci mniejsze.

4. Zapobiegaj ponownym renderowaniom Użyłem React.memo w komponentach wierszy. Użyłem również useCallback dla handlerów zdarzeń. Zapobiega to aktualizowaniu komponentów potomnych, gdy ich dane pozostają niezmienione.

5. Użyj paginacji po stronie serwera Przestałem pobierać wszystkich użytkowników naraz. Przeszedłem na pobieranie małych stron po 50 rekordów. Skutkuje to szybszymi odpowiedziami API i mniejszym rozmiarem przesyłanych danych.

6. Zoptymalizuj Material UI MUI Autocomplete jest świetne, ale ma problemy z ogromnymi listami. Aby zachować szybkość, ograniczyłem wyświetlane opcje do pierwszych 100 wyników.

Wyniki:

• Szybkość listy: Z 5 sekund do poniżej 500 ms. • Reakcja wyszukiwania: Z opóźnionej na błyskawiczną. • Zużycie pamięci: Znaczna redukcja.

Problemy z wydajnością często pozostają ukryte podczas developmentu. Pojawiają się, gdy realne dane trafiają do użytkowników.

Najpierw zidentyfikuj wąskie gardła. Napraw największe z nich za pomocą memoizacji, wirtualizacji i debouncingu.

Jaka optymalizacja najbardziej pomogła Twoim aplikacjom React? Daj znać w komentarzach.

Źródło: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9