Virtual scrolling (windowing) là gì? Khi nào cần dùng?

Virtual scrolling chỉ render items visible trong viewport (~20-50 nodes) bất kể list có hàng nghìn items — dùng @tanstack/react-virtual; chỉ cần khi list >100-200 items phức tạp, profile trước.

• Virtual scrolling (windowing) chỉ render DOM nodes cho items visible trong viewport — list 10,000 items chỉ render 20-50 items trong DOM tại bất kỳ thời điểm nào, maintain scroll position qua spacer elements.
• Mechanism: total height của list được set bằng container (tạo scrollbar đúng size), khi scroll, calculate which items should be visible, render chỉ those items với absolute positioning.
• Libraries: @tanstack/react-virtual (headless, flexible, không opinionated về UI — phổ biến nhất hiện tại); react-window (Brian Vaughn, smaller, simpler API cho fixed-size items); react-virtuoso (dynamic item heights, auto-measure).
• Khi cần dùng: list >100-200 items với complex rendering (images, many DOM nodes per item); performance profiling (React DevTools Profiler hoặc Chrome Performance tab) cho thấy list rendering là bottleneck — đừng premature optimize.

Pitfall: virtual scrolling phức tạp hơn regular list — khó implement features như 'scroll to item', dynamic item heights, sticky headers; @tanstack/react-virtual có examples cho tất cả cases này.

• Variable height items: cần measure items sau render để tính scroll position — @tanstack/react-virtual và react-virtuoso handle dynamic heights tốt hơn react-window.
• Alternative đơn giản hơn khi list không quá dài: pagination hoặc 'load more' button — ít phức tạp, không cần virtual scrolling.