PerformanceVirtual scrolling (windowing) chỉ render DOM node cho items đang hiển thị trong viewport — list 10.000 items chỉ có ~20–50 node trong DOM tại một thời điểm.
- Cơ chế — container được set tổng chiều cao thật (scrollbar đúng size); khi scroll, tính items nào visible và chỉ render chúng với absolute positioning.
- Libraries —
@tanstack/react-virtual(headless, linh hoạt, phổ biến nhất hiện tại);react-window(nhỏ, API đơn giản cho item fixed-size);react-virtuoso(auto-measure item height động). - Khi nào cần — list >100–200 items với rendering phức tạp (ảnh, nhiều DOM node mỗi item) và profiling (React DevTools Profiler, Chrome Performance tab) cho thấy list rendering là bottleneck — đừng optimize sớm.
- Đánh đổi — phức tạp hơn list thường: scroll-to-item, dynamic item height, sticky header khó implement hơn; item height động phải measure sau render (
@tanstack/react-virtualvà react-virtuoso xử lý tốt hơn react-window). - Alternative đơn giản hơn — pagination hoặc nút 'load more' khi list không quá dài.