React Uygulamam Neden 5.000 Kayıtta Yavaşladı

Arama yapılabilen bir açılır menü (dropdown) ve bir veri tablosu içeren bir React özelliği geliştirdim.

Geliştirme aşamasında her şey yolundaydı. Sonra gerçek üretim verilerini yükledim. Uygulama yavaşladı.

Açılır menünün açılması saniyeler sürüyordu. Arama kutusuna yazı yazmak takılmalara neden oluyordu. Uygulama çok fazla bellek kullanıyordu.

5.000 kullanıcı kaydını yönetmem gerekiyordu. Anlık arama ve akıcı bir kaydırma (scrolling) deneyimine ihtiyacım vardı.

İşte bunu nasıl çözdüğüm:

  1. Hesaplamalar için useMemo kullanın Verileri her render işleminde filtrelemeyi bıraktım. Filtrelenmiş listeyi saklamak için useMemo kullandım. Bu, CPU üzerindeki gereksiz yükü önler.

  2. Debouncing ekleyin Eskiden her tuş vuruşu bir aramayı tetikliyordu. Bu, büyük listeler için maliyetli bir işlemdir. 300ms'lik bir debounce ekledim. Artık uygulama, kullanıcı yazmayı bıraktıktan sonra arama yapıyor.

  3. Virtualization uygulayın En büyük çözüm buydu. 5.000 DOM öğesini render etmek yerine react-window kullandım. Tarayıcı artık sadece ekranda görünen 20 veya 30 satırı render ediyor. Bu, kaydırmayı akıcı hale getiriyor ve bellek kullanımını düşürüyor.

  4. Yeniden Render edilmeleri (Re-renders) önleyin Satır bileşenlerinde React.memo kullandım. Ayrıca olay işleyiciler (event handlers) için useCallback kullandım. Bu, verileri aynı kalan alt bileşenlerin güncellenmesini engeller.

  5. Sunucu Taraflı Sayfalama (Server-side Pagination) kullanın Tüm kullanıcıları tek seferde çekmeyi bıraktım. 50 kayıttan oluşan küçük sayfalar halinde çekmeye geçtim. Bu, daha hızlı API yanıtları ve daha küçük veri yükleri (payloads) sağlar.

  6. Material UI'ı optimize edin MUI Autocomplete harikadır ancak devasa listelerde zorlanır. Hızlı kalması için görüntülenen seçenekleri ilk 100 sonuçla sınırladım.

Sonuçlar:

• Açılır menü hızı: 5 saniyeden 500ms'nin altına. • Arama yanıtı: Takılmalardan anlık hale. • Bellek kullanımı: Önemli ölçüde azalma.

Performans sorunları genellikle geliştirme aşamasında gizli kalır. Gerçek veriler kullanıcılarınıza ulaştığında ortaya çıkarlar.

Önce darboğazlarınızı (bottlenecks) ölçün. En büyük olanları memoization, virtualization ve debouncing ile düzeltin.

Hangi optimizasyon React uygulamalarınıza en çok yardımcı oldu? Yorumlarda bana bildirin.

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