Arkadaşlar merhaba, son birkaç haftadır React ile geliştirdiğim bir projede oldukça karmaşık bir tablo bileşeni üzerinde çalışıyorum. Veri setimiz yaklaşık 5000 satır ve 20 kolondan oluşuyor. Her satırda düzenlenebilir inputlar, açılır menüler ve bazı özel hesaplama sonuçları var. Başlangıçta her şey güzel gidiyordu ama veri sayısı arttıkça sayfa donmaya, kaydırma işlemi takılmaya ve inputlara yazarken gecikmeler oluşmaya başladı. Virtualization kullanmak en mantıklı çözüm gibi görünüyordu, react-window ile satırları sanallaştırdım. Ama bu sefer de sütun bazında sabit genişlikler ve dinamik içerik değişimlerinde scroll pozisyonu kayboluyor, hücrelere tıklayınca farklı satırlar renderlanıyor. Bu konuda deneyimi olan var mı? Siz nasıl bir yaklaşım izlediniz?
Bir diğer büyük problemim ise state yönetimiydi. Her hücrenin kendi local state'i varken tüm tabloyu tek bir büyük state objesinde tutmaya çalıştım. Tabii ki bu, herhangi bir hücrede yapılan değişiklikte tüm tablonun yeniden renderlanmasına yol açtı. useMemo ve React.memo ile bazı iyileştirmeler yaptım ama özellikle hücre bazında validation yaparken (örneğin bir inputa değer girince diğer kolondaki değer otomatik hesaplanıyor) hala performans düşüklüğü yaşıyorum. Acaba bu durumda Context API mi kullanmalıyım yoksa daha hafif bir state yönetim kütüphanesine mi geçmeliyim? Redux çok ağır geliyor bu senaryoda.
Son olarak, tabloda sürükle-bırak ile satır sıralama ve kolon yeniden boyutlandırma gibi özellikler de eklemek istiyorum. Şu anki haliyle bu eklemeleri yaparsam performansın iyice dibe vuracağından endişeliyim. Sizin deneyimlediğiniz custom hook çözümleri veya üçüncü parti kütüphaneler var mı? Özellikle react-table, ag-grid veya tanstack table arasında kaldım. Hangisi bu tip büyük ve interaktif tablolar için daha uygun? Görüşlerinizi merakla bekliyorum.
Bir diğer büyük problemim ise state yönetimiydi. Her hücrenin kendi local state'i varken tüm tabloyu tek bir büyük state objesinde tutmaya çalıştım. Tabii ki bu, herhangi bir hücrede yapılan değişiklikte tüm tablonun yeniden renderlanmasına yol açtı. useMemo ve React.memo ile bazı iyileştirmeler yaptım ama özellikle hücre bazında validation yaparken (örneğin bir inputa değer girince diğer kolondaki değer otomatik hesaplanıyor) hala performans düşüklüğü yaşıyorum. Acaba bu durumda Context API mi kullanmalıyım yoksa daha hafif bir state yönetim kütüphanesine mi geçmeliyim? Redux çok ağır geliyor bu senaryoda.
Son olarak, tabloda sürükle-bırak ile satır sıralama ve kolon yeniden boyutlandırma gibi özellikler de eklemek istiyorum. Şu anki haliyle bu eklemeleri yaparsam performansın iyice dibe vuracağından endişeliyim. Sizin deneyimlediğiniz custom hook çözümleri veya üçüncü parti kütüphaneler var mı? Özellikle react-table, ag-grid veya tanstack table arasında kaldım. Hangisi bu tip büyük ve interaktif tablolar için daha uygun? Görüşlerinizi merakla bekliyorum.