Virtual Scrolling

Virtual scrolling (windowing) adalah teknik untuk merender hanya item yang terlihat di viewport, meskipun list memiliki ribuan item.

Masalah

Merender 10.000 DOM nodes sekaligus menyebabkan:

• Initial render sangat lambat (bisa > 5 detik)
• Memory usage tinggi
• Scroll yang laggy

Solusi: Virtual Scrolling

Hanya render ~20-30 item yang terlihat + buffer. Saat user scroll, recycle DOM nodes dengan data baru.

// Konsep dasar virtual scroll
function getVisibleRange(scrollTop, containerHeight, itemHeight) {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    startIndex + Math.ceil(containerHeight / itemHeight) + 1,
    totalItems
  );
  return { startIndex, endIndex };
}

Library yang Tersedia

• React: react-window, @tanstack/react-virtual
• Vue: vue-virtual-scroller
• Vanilla: clusterize.js

Kapan Menggunakan

• List > 100 items (terutama dengan konten complex per item)
• Table dengan banyak rows
• Feed/timeline (social media)
• Spreadsheet/data grid