Arkadaşlar merhaba, uzun süredir React ile çalışıyorum ve son projelerimden birinde dropdown menü performansı beni gerçekten zorlamaya başladı. Özellikle içerisinde 200-300 arası seçenek bulunan bir dropdown yapmam gerekti. Normal şartlarda bu kadar çok veriyi backendden çekip listelemek sorun değil gibi görünse de, menü açıldığında sayfada ciddi bir kasma ve gecikme yaşıyorum. Sanki her bir list item ayrı ayrı render edilirken React sanki tüm component ağacını baştan oluşturuyor gibi hissediyorum. Virtualization kullanmayı düşündüm ama dropdown içinde scroll yapısı kurmak biraz can sıkıcı olabilir, sizce bu çözüm yeterli olur mu?
Dropdown menünün açılıp kapanma animasyonları da cabası. CSS transition ile basit bir fade in/out ekledim ama bu sefer de açılış anında tüm listeyi DOM'a eklemesi gerektiği için ilk açılışta bir takılma oluyor. Mesela menüyü açtığımda 1 saniye kadar bembeyaz bir boşluk görüp sonra listeyi görüyorum. useMemo ve useCallback ile gereksiz re-renderları engellemeye çalıştım, hatta listeyi bir state'e atıp sadece gerekli durumlarda güncelliyorum ama yine de tam istediğim akıcılığı yakalayamadım. Belki de Context API kullanımından kaynaklı bir sorun olabilir, çünkü dropdown'ın durumunu üst bileşenlerden alıyorum.
Son olarak, acaba bu tarz büyük listeler için hazır kütüphaneler mi kullanmalıyım? Mesela React-Select, Downshift gibi araçlar var ama onların da kendi içinde performans sorunları olduğunu duydum. Özellikle form içinde birden fazla dropdown kullanınca sayfa iyice ağırlaşıyor. Siz hangi yöntemleri denediniz? Virtualization dışında önerisi olan var mı, yoksa direkt olarak veriyi sayfalaştırıp "daha fazla göster" butonu mu eklemeliyim? Fikirlerinizi merak ediyorum.
Dropdown menünün açılıp kapanma animasyonları da cabası. CSS transition ile basit bir fade in/out ekledim ama bu sefer de açılış anında tüm listeyi DOM'a eklemesi gerektiği için ilk açılışta bir takılma oluyor. Mesela menüyü açtığımda 1 saniye kadar bembeyaz bir boşluk görüp sonra listeyi görüyorum. useMemo ve useCallback ile gereksiz re-renderları engellemeye çalıştım, hatta listeyi bir state'e atıp sadece gerekli durumlarda güncelliyorum ama yine de tam istediğim akıcılığı yakalayamadım. Belki de Context API kullanımından kaynaklı bir sorun olabilir, çünkü dropdown'ın durumunu üst bileşenlerden alıyorum.
Son olarak, acaba bu tarz büyük listeler için hazır kütüphaneler mi kullanmalıyım? Mesela React-Select, Downshift gibi araçlar var ama onların da kendi içinde performans sorunları olduğunu duydum. Özellikle form içinde birden fazla dropdown kullanınca sayfa iyice ağırlaşıyor. Siz hangi yöntemleri denediniz? Virtualization dışında önerisi olan var mı, yoksa direkt olarak veriyi sayfalaştırıp "daha fazla göster" butonu mu eklemeliyim? Fikirlerinizi merak ediyorum.