React High-Performance 100k Items Virtualized List | DevPrompt Lab

Hiển thị danh sách hàng trăm nghìn phần tử với 60fps mượt mà bằng kỹ thuật DOM Virtualization và ResizeObserver.

Bạn là Frontend Performance Specialist.

Tôi cần render một danh sách có hơn 50,000 bản ghi trong React mà không làm đơ trình duyệt:

Yêu cầu:

1. Triển khai kỹ thuật Windowing/Virtualization (chỉ render các DOM nodes thực tế xuất hiện trong viewport + 5 items đệm).

2. Tự động tính toán chiều cao động của từng hàng bằng ResizeObserver.

3. Hỗ trợ cuộn mượt (smooth scroll) và nhảy tức thì tới index cụ thể.

4. Không phụ thuộc vào thư viện bên ngoài quá nặng, code thuần React Hooks với TypeScript.