Çok uzun bir listeyi (on binlerce satır) performanslı nasıl gösterirsiniz?

Binlerce DOM düğümü oluşturmak hem render'ı hem kaydırmayı yavaşlatır. Çözümler:

1. Sanallaştırma (virtualization / windowing): yalnızca ekranda görünen satırlar (ve birkaç tampon satır) DOM'a eklenir; kaydırdıkça aynı düğümler yeniden kullanılır. Kütüphaneler: TanStack Virtual, react-window.
2. Sayfalama veya sonsuz kaydırma: veri parça parça yüklenir.
3. Sunucu tarafında filtreleme ve sıralama: istemciye tüm veri gönderilmez.
4. CSS ile tarayıcıya yardım: content-visibility: auto ekran dışı bölümlerin render'ını atlar.

const sanal = useVirtualizer({
  count: satirlar.length,
  getScrollElement: () => kapRef.current,
  estimateSize: () => 40,
});
// sanal.getVirtualItems() ile yalnızca görünen ~20 satır çizilir

Ek olarak satır bileşeni React.memo ile sarılmalı ve key olarak kararlı id kullanılmalıdır.