Implement simple virtual list (render chỉ visible items)?

Virtual list là kỹ thuật chỉ render các items đang hiển thị trong viewport thay vì toàn bộ danh sách, giúp xử lý hàng chục nghìn items mà không lag.

Cách tính: lấy visibleStart = Math.floor(scrollTop / itemHeight) và visibleEnd = visibleStart + Math.ceil(containerHeight / itemHeight) để xác định range items cần render. Container bên ngoài cần có tổng chiều cao bằng totalItems itemHeight để giữ scrollbar đúng kích thước, còn mỗi item dùng position: absolute với top = index itemHeight.

Trong thực tế, nên dùng thư viện react-window hoặc @tanstack/virtual vì chúng đã xử lý tốt các edge cases như dynamic item heights, overscan (render thêm vài items ngoài viewport cho smooth scroll), và scroll restoration.