Xử lý Vấn đề Re-render Hàng loạt ở Bảng Dữ liệu Lớn

Tách nhỏ component đến từng ô dữ liệu, áp dụng React.memo với custom areEqual function, chuyển đổi state quản lý cục bộ bằng Zustand để tránh trigger từ component gốc, và sử dụng kỹ thuật virtualization (React Virtualized) để chỉ render các hàng hiển thị trên màn hình.

Khi gặp tình trạng này ở dự án thực tế, bước đầu tiên tôi dùng Chrome Profiler để đo lường và xác định chính xác component nào gây tốn thời gian render nhất. Sau đó, tôi áp dụng virtualization để chỉ render những gì người dùng thực sự nhìn thấy, kết hợp với React.memo và chia nhỏ state cục bộ giúp cô lập phạm vi re-render. Kết quả là FPS tăng lên ổn định ở mức 60.

Việc chia nhỏ component và dùng custom areEqual làm tăng độ phức tạp của code và tốn một chút thời gian viết code ban đầu, nhưng đổi lại hiệu năng và trải nghiệm người dùng được cải thiện triệt để.

Độ trễ giao diện giảm từ 300ms xuống dưới 16ms, loại bỏ hoàn toàn hiện tượng giật lag khi có biến động thị trường.

Không bao giờ cập nhật state toàn cục cho các dữ liệu tần suất cao; cần thiết kế kiến trúc component tách biệt rõ ràng giữa các vùng dữ liệu tĩnh và động.