Vue 3.5 принесла useOptimistic - киллер-фича для Composition API. Это хук упрощает оптимистичные обновления, когда стейт меняется мгновенно, а сервер подтверждает позже. Идеально для интерактивных таблиц с пагинацией - никаких лагов, UX на высоте.

Представь таблицу задач: кликнул ‘выполнено’ - строка сразу зеленеет, пагинация перестраивается. Без useOptimistic пришлось бы ждать API, рендер тормозил, Web Vitals страдали. Теперь один composable решает боль, код чистый, типизированный на TS. Разберем, как это работает на реальном примере.

Что такое useOptimistic и зачем он в таблицах

useOptimistic - это новый хук из Vue 3.5, который мутирует реактивный стейт оптимистично. Ты вызываешь мутацию локально, хук возвращает updatedState для рендера, а потом синхронизирует с сервером. Если ошибка - откатывается автоматически. В таблицах с пагинацией это спасает от фризов: меняешь статус ряда - пагинация обновляется сразу, без ререндера всей таблицы.

Раньше для такого юзали ручные ref/reactive с pending-флагами, что плодило бойлерплейт. Теперь хук абстрагирует всю логику: optimistic update, rollback on error, даже SSR-friendly. Представь таблицу на 1000+ строк - клик, и стейт меняется за микросекунды. Плюс TypeScript-инференс из коробки, линтер не ругается. Подводя к примеру: базовый composable для пагинированной таблицы.

• Локальная мутация: const { state } = useOptimistic(initialData, mutators) - state сразу обновлен.
• Серверная синхронизация: передай mutator-функцию, хук сам вызовет API и сломает на ошибке.
• Пагинация в стейте: держи currentPage, totalPages в reactive-объекте - все реактивно.
• DX-бонус: composable переиспользуй между компонентами, никаких дубликатов.

Реализуем composable для таблицы с пагинацией

Composable - сердце паттерна. Берем useOptimistic, оборачиваем в ref для данных таблицы: items, currentPage, total. Мутация toggleStatus(id) меняет статус локально, шлет PATCH на сервер. Пагинация на computed - totalItems / pageSize. В