10.000 satırlık bir tablomuz var ve render edilirken yavaşlamaya başlıyor. Bu neden oluyor ve nasıl düzeltebiliriz?

10.000 satırlık bir tablonun çizimi, çok sayıda DOM öğesi nedeniyle yavaşlamalara neden olur, bu da tarayıcıyı aşırı yükler ve render sürecini yavaşlatır.

Nasıl düzeltilir:

• Liste sanallaştırma (sanal kaydırma) — sadece görünür kısmı DOM'a render etmek, kaydırma sırasında satırları yüklemek.
• Sayfalama — verileri sayfalara bölmek ve her seferinde sınırlı sayıda satır göstermek.
• Render optimizasyonu — memoizasyon kullanmak, gereksiz yeniden renderları önlemek.

React ve react-window ile sanal kaydırma kullanımına örnek:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Satır {index}</div>
);

<List
  height={500}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {Row}
</List>