Render danh sách hàng chục nghìn item: virtualization hoạt động thế nào?

const parentRef = useRef<HTMLDivElement>(null);
const v = useVirtualizer({
  count: rows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 36,
  overscan: 8,
});

<div ref={parentRef} style={{ height: 500, overflow: "auto" }}>
  <div style={{ height: v.getTotalSize(), position: "relative" }}>
    {v.getVirtualItems().map((it) => (
      <div key={it.key} style={{ position: "absolute", top: 0, height: it.size,
           transform: `translateY(${it.start}px)` }}>{rows[it.index].name}</div>
    ))}
  </div>
</div>

• Chi phí tỉ lệ với số item nhìn thấy, không theo tổng số.
• Item chiều cao động cần đo (measureElement); chiều cao cố định thì đơn giản và nhanh nhất.
• Đánh đổi: Ctrl+F của trình duyệt không tìm được item ngoài viewport, cần quan tâm accessibility (aria-rowcount, aria-setsize) và focus.
• Cách khác: phân trang, infinite scroll, content-visibility: auto.