TanStack випустила бета-версію Table v9 — бібліотеки для створення дата-гридів, яка дозволяє розробникам підключати лише ті функції, які їм потрібні. Розмір бандлів скоротився приблизно до 5 КБ, а затримки interaction-to-next-paint (INP), через які сортування або фільтрація здавалися «гальмуючими», зникли.

Чому це важливо

У версії v8 бібліотека постачає всю логіку сітки — сортування, фільтрацію, пагінацію, вибір рядків, групування — незалежно від того, чи використовує їх проєкт. Цей зайвий код виконується в головному потоці, збільшує розмір бандла та додає затримку до дій користувача. Для дашбордів, яким потрібні швидкі та чуйні таблиці, кілька мілісекунд затримки можуть опустити показник INP у невдалий діапазон.

Що v9 робить інакше

  • Модулі функцій за запитом (Opt-in) – Імпортуйте лише ті частини, які ви насправді використовуєте. Якщо ви не використовуєте сортування, код для нього ніколи не потрапить у бандл.
  • Інтеграція з TanStack Store – Керуйте станом за допомогою дрібнозернистого (fine-grained) сховища, щоб оновлення одного рядка не викликало повного перерендеру панелі фільтрації або інших непов'язаних елементів інтерфейсу.
  • Зменшення споживання пам'яті – Менша кількість об'єктів і масивів полегшує навантаження на JavaScript heap під час тривалих сесій.

Ці зміни дозволяють зменшити обсяг завантаження (бібліотека може важити близько 5 КБ для простого списку) та забезпечити плавнішу взаємодію, коли сітка завантажена.

Кому це принесе користь

  • Frontend-команди, які створюють внутрішні інструменти, адмін-панелі або SaaS-дашборди, де таблиці є основним елементом інтерфейсу.
  • Сайти, орієнтовані на продуктивність, які відстежують Core Web Vitals; нижчий INP безпосередньо покращує цей показник.

Що v9 не виправляє

Покращення стосуються лише того коду, який ви контролюєте. Вони не змагічно не прискорять сторінку, що завантажує величезний JSON-пакет, і не компенсують вартість важких сторонніх скриптів. Великі набори даних все одно потребують належної пагінації, а затримка мережі залишається окремим питанням.

Практичний шлях міграції

  1. Визначте найважчі таблиці – Знайдіть списки замовлень, сітки інвентарю або представлення CRM, які вже демонструють помітне гальмування.
  2. Зафіксуйте базові метрики – Запишіть показники INP та тривалість довгих завдань (long-task) на цих сторінках перед будь-якими змінами.
  3. Мігруйте по одній сітці за раз – Замініть імпорт v8 на набір модулів v9, увімкнувши лише ті функції, які фактично використовуються на екрані.
  4. Уникайте універсального бандла stockFeatures – Використання стандартного набору функцій нівелює мету економії розміру.
  5. Перевірте взаємодію повторно – Знову виміряйте сортування, фільтрацію та вибір, щоб підтвердити приріст продуктивності.

Контраргумент: це не панацея

Деякі розробники можуть очікувати, що v9 вирішить усі проблеми з повільним інтерфейсом. Насправді переваги бібліотеки обмежені обсягом коду, який ви можете видалити. Якщо вузьким місцем таблиці є величезна кількість рядків або неефективний серверний API, зменшення розміру бандла матиме обмежений вплив.

На що звернути увагу далі

Підсумок: TanStack Table v9 дає вам реальний спосіб припинити «платити» за невикористаний функціонал сітки. Імпортуючи лише необхідні модулі та використовуючи дрібнозернисте сховище, ви можете зменшити розмір своїх бандлів на кілька кілобайт і забезпечити помітно швидшу взаємодію з таблицями — за умови, що ви поєднаєте оновлення з розумними стратегіями обробки даних.