Nâng CaoReact iconReact

Optimize React app cho 10,000+ items trong danh sách?

Để hiển thị danh sách hàng chục nghìn items mà không giật lag, giải pháp quan trọng nhất là dùng virtual list với react-window hoặc @tanstack/virtual, chỉ render khoảng 20-30 items đang hiển thị trên màn hình thay vì toàn bộ.

Kết hợp thêm React.memo cho list item component để tránh re-render không cần thiết, và useMemo cho logic filter/sort để không tính toán lại mỗi lần render. Nếu có search/filter phức tạp trên tập dữ liệu lớn, nên chuyển sang Web Worker để xử lý ở background thread, tránh block main thread gây đơ UI.

Mục tiêu là giữ mỗi frame render dưới 16ms (60fps), và nên đo bằng React DevTools Profiler hoặc Chrome Performance tab để xác nhận.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React