TanStack đã phát hành bản beta của Table v9, một thư viện data-grid cho phép các nhà phát triển chỉ chọn (opt-in) những tính năng mà họ thực sự cần. Kích thước bundle giảm xuống còn khoảng 5 KB và các độ trễ interaction-to-next-paint (INP) vốn khiến việc sắp xếp hoặc lọc cảm thấy bị giật lag sẽ biến mất.

Tại sao sự thay đổi này lại quan trọng

Trong v8, thư viện đi kèm với mọi logic của grid—sắp xếp, lọc, phân trang, chọn hàng, nhóm—bất kể dự án có sử dụng chúng hay không. Phần mã bổ sung đó chạy trên main thread, làm tăng kích thước bundle và thêm độ trễ vào các hành động của người dùng. Đối với các dashboard cần các bảng dữ liệu nhanh và phản hồi tốt, chỉ cần vài mili giây trễ cũng có thể đẩy điểm INP xuống mức kém.

v9 có gì khác biệt

  • Các module tính năng theo dạng opt-in – Chỉ import những phần bạn thực sự sử dụng. Nếu bỏ qua sắp xếp, mã nguồn sắp xếp sẽ không bao giờ xuất hiện trong bundle.
  • Tích hợp TanStack Store – Quản lý state với một store có độ chi tiết cao (fine-grained), nhờ đó việc cập nhật một hàng sẽ không kích hoạt việc re-render toàn bộ thanh lọc hoặc các UI không liên quan khác.
  • Giảm mức chiếm dụng bộ nhớ – Ít đối tượng và mảng hơn giúp giảm áp lực lên JavaScript heap trong các phiên làm việc kéo dài.

Những thay đổi này giúp giảm dung lượng tải xuống (thư viện có thể chỉ nặng gần 5 KB đối với một danh sách đơn giản) và giúp tương tác mượt mà hơn khi grid đang xử lý nhiều dữ liệu.

Những ai sẽ được hưởng lợi

  • Các đội ngũ frontend đang xây dựng các công cụ nội bộ, bảng điều khiển admin hoặc dashboard SaaS, nơi các bảng là thành phần UI chính.
  • Các trang web chú trọng hiệu năng có theo dõi Core Web Vitals; chỉ số INP thấp hơn sẽ trực tiếp cải thiện metric này.

Những gì v9 không giải quyết được

Những cải tiến này nhắm vào phần mã nguồn mà bạn kiểm soát. Chúng sẽ không giúp một trang web tải payload JSON khổng lồ nhanh lên một cách thần kỳ, cũng không bù đắp được chi phí của các script bên thứ ba nặng nề. Các tập dữ liệu lớn vẫn cần phân trang hợp lý, và độ trễ mạng vẫn là một vấn đề riêng biệt.

Lộ trình di chuyển thực tế

  1. Xác định các bảng nặng nhất – Tìm các danh sách đơn hàng, lưới kho hàng hoặc các view CRM vốn đã có độ trễ rõ rệt.
  2. Ghi lại các chỉ số cơ sở (baseline metrics) – Ghi lại INP và thời lượng long-task trên các trang đó trước khi thực hiện bất kỳ thay đổi nào.
  3. Di chuyển từng grid một – Thay thế import v8 bằng bộ module v9, chỉ kích hoạt những tính năng mà màn hình thực sự sử dụng.
  4. Tránh sử dụng bundle stockFeatures kiểu "gom tất cả" – Việc lấy toàn bộ bộ tính năng mặc định sẽ làm mất đi mục đích tiết kiệm dung lượng.
  5. Kiểm tra lại các tương tác – Đo lường lại việc sắp xếp, lọc và chọn để xác nhận mức tăng hiệu năng.

Góc nhìn ngược lại: không phải là "viên đạn bạc"

Một số nhà phát triển có thể kỳ vọng v9 sẽ giải quyết mọi vấn đề UI chậm chạp. Trên thực tế, những lợi ích của thư viện bị giới hạn bởi lượng mã tùy chỉnh mà bạn có thể cắt tỉa. Nếu nút thắt cổ chai của một bảng là số lượng hàng quá lớn hoặc một API máy chủ không hiệu quả, việc giảm kích thước bundle sẽ có tác động hạn chế.

Điều cần lưu ý tiếp theo

Bài học rút ra: TanStack Table v9 mang lại cho bạn một cách cụ thể để ngừng phải "trả giá" cho những chức năng grid không sử dụng. Bằng cách chỉ import các module cần thiết và sử dụng một store có độ chi tiết cao, bạn có thể cắt giảm vài kilobyte khỏi bundle và mang lại các tương tác bảng nhanh nhạy hơn đáng kể—miễn là bạn kết hợp việc nâng cấp với các chiến lược xử lý dữ liệu hợp lý.