Svelte 5 принёс радикальные изменения в реактивность - и это не просто очередной мейджор апдейт. Теперь у нас есть руны, которые переносят логику состояния прямо в компонент без лишних обёрток. Это открывает невероятные возможности для реализации оптимистичных мутаций, которые раньше требовали жонглирования состояниями и сложной синхронизацией.

Если ты когда-нибудь писала код, где пользователь кликает, UI обновляется, а потом ждёшь ответа с сервера - ты знаешь эту боль. Оптимистичные обновления решают эту проблему: меняешь интерфейс сейчас, а не когда бекенд решит ответить. В этой статье разберёмся, как Svelte 5 рунами и TanStack Query делают это elegantly.

Что такое руны и почему они меняют игру

Руны в Svelte 5 - это по сути магические функции-компилятор-сигналы, которые влияют на работу компилятора напрямую. Вместо того чтобы писать громоздкий код с useState или useReducer, ты просто пишешь обычный JavaScript, а компилятор сам понимает, где нужна реактивность.

В предыдущих версиях Svelte для создания реактивного состояния ты писала простой let, и компилятор это понимал. Но в Svelte 5 пошли дальше - теперь у тебя есть явные руны вроде $state, $derived, $effect, которые дают больше контроля и предсказуемости. Это не просто синтаксический сахар - это фундаментальный сдвиг в архитектуре реактивности.

Ключевые руны для работы с состоянием:

• $state - создаёт реактивное состояние, которое компилятор будет отслеживать. Можешь использовать примитивы или объекты - всё равно работает;
• $derived - вычисляемое состояние, которое автоматически обновляется, когда меняются зависимости (аналог useMemo);
• $effect - побочные эффекты, которые запускаются при изменении зависимостей (аналог useEffect);
• $props - явная передача пропсов в компонент с типизацией.

Зачем это нужно? Потому что мелкозернистая реактивность - это киллер-фича. Svelte 5 использует сигналы для реактивности, как и Solid.js. Это означает, что если в большом списке из 1000 элементов изменится один - перерисуется только он, а не весь компонент. Производительность просто зашкаливает.

$state для оптимистичных обновлений

Теперь к самому интересному. Для оптимистичных мутаций нужно управлять несколькими состояниями одновременно: локальное состояние пользователя, статус загрузки, возможный откат. Раньше это была боль - нужно было синхронизировать множество useState хуков.

С Svelte 5 это становится элегантнее. Вот как выглядит базовая структура:

<script>
  let todos = $state([]);
  let isLoading = $state(false);
  let error = $state(null);

  async function addTodoOptimistic(text) {
    const optimisticTodo = {
      id: Math.random(),
      text,
      pending: true
    };

    // Оптимистичное обновление - сразу показываем пользователю
    todos.push(optimisticTodo);
    isLoading = true;

    try {
      const response = await fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify({ text })
      });

      if (!response.ok) throw new Error('Ошибка сервера');

      const newTodo = await response.json();
      // Заменяем оптимистичное на реальное
      todos = todos.map(t => 
        t.id === optimisticTodo.id ? newTodo : t
      );
    } catch (err) {
      // Откат при ошибке
      todos = todos.filter(t => t.id !== optimisticTodo.id);
      error = err.message;
    } finally {
      isLoading = false;
    }
  }
</script>

Это уже намного чище, чем в классическом React. Но подожди, мы можем ещё лучше!

TanStack Query + Svelte 5 рунами

TanStack Query (бывший React Query) - это супер-библиотека для управления асинхронным состоянием. Она берёт на себя кеширование, синхронизацию, инвалидацию, и предоставляет удобный API для работы с этим.

Свежая новость - TanStack Query работает не только с React. Есть адаптер для Svelte, который отлично интегрируется с рунами. Вот как это выглядит в Svelte 5:

import { createMutation, useQueryClient } from '@tanstack/svelte-query';

let queryClient = useQueryClient();

const mutation = createMutation({
  mutationFn: async (newTodo) => {
    const res = await fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify(newTodo)
    });
    return res.json();
  },
  onMutate: async (newTodo) => {
    // Отменяем любые запросы на получение todos
    await queryClient.cancelQueries({ queryKey: ['todos'] });

    // Сохраняем старые данные для отката
    const previousTodos = queryClient.getQueryData(['todos']);

    // Оптимистичное обновление кеша
    queryClient.setQueryData(['todos'], (old) => [
      ...old,
      { ...newTodo, id: Date.now(), isPending: true }
    ]);

    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    // Откат на старые данные при ошибке
    queryClient.setQueryData(['todos'], context.previousTodos);
  },
  onSuccess: (data) => {
    // Инвалидируем кеш, чтобы получить свежие данные
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  }
});

Видишь, как это работает? TanStack Query берёт на себя:**

• onMutate - предварительная обработка перед запросом (оптимистичное обновление);
• onError - откат при ошибке;
• onSuccess - что делать после успешного ответа;
• Кеширование - автоматическая синхронизация данных между запросами.

Это жорстко лучше, чем писать всё вручную. TanStack Query заботится о граничных случаях, которые ты забудешь учесть.

useOptimistic для UI-паттернов

Хотя в Svelte 5 нет встроенного useOptimistic (как в React 19), ты можешь легко создать свой хук, используя руны. Идея в том, что ты показываешь оптимистичное состояние UI, пока идёт запрос, а потом синхронизируешь с реальностью.

Вот паттерн, который работает отлично:

<script>
  import { createMutation } from '@tanstack/svelte-query';

  let todos = $state([]);
  let optimisticTodos = $derived.by(() => {
    return todos.map(t => ({
      ...t,
      isOptimistic: !t.confirmed
    }));
  });

  const deleteMutation = createMutation({
    mutationFn: (id) => fetch(`/api/todos/${id}`, { method: 'DELETE' }),
    onMutate: (id) => {
      // Мгновенно удаляем из UI
      todos = todos.filter(t => t.id !== id);
      return id;
    },
    onError: (err, id, context) => {
      // Возвращаем назад, если ошибка
      todos.push({ id, text: 'Ошибка удаления', confirmed: false });
    }
  });

  function handleDeleteClick(id) {
    deleteMutation.mutate(id);
  }
</script>

<ul>
  {#each optimisticTodos as todo (todo.id)}
    <li class:pending={todo.isOptimistic}>
      {todo.text}
      <button on:click={() => handleDeleteClick(todo.id)}>
        Удалить
      </button>
    </li>
  {/each}
</ul>

<style>
  .pending {
    opacity: 0.6;
    text-decoration: line-through;
  }
</style>

Видишь, как $derived помогает? Это вычисляемое состояние автоматически обновляется, когда меняется todos. Никаких лишних рендеров, всё мелкозернисто.

Сравнение подходов

Практические советы и пидоры

Когда ты работаешь с оптимистичными обновлениями, есть несколько подводных камней, в которые легко наступить:

• Конфликты идентификаторов - если генерируешь ID на клиенте (например, Math.random()), они могут конфликтовать. Лучше используй UUID или синхронизируй ID после успешного создания на сервере;
• Race conditions - если пользователь отправляет запрос, а потом тут же отправляет второй, нужно убедиться, что они применяются в правильном порядке. TanStack Query это обрабатывает, но собственный код - может упасть;
• Offline-режим - если соединение порвалось, мутация повиснет. Нужно обработать timeout и предложить пользователю повторить;
• Visibility state - используй document.visibilityState для отслеживания, виден ли пользователю вкладка. Если невидима - можешь отложить рефетч.

Продвинутый паттерн - оптимистичное обновление с очередью мутаций:

let mutationQueue = $state([]);
let isProcessing = $state(false);

async function processMutationQueue() {
  if (isProcessing || mutationQueue.length === 0) return;
  
  isProcessing = true;
  while (mutationQueue.length > 0) {
    const mutation = mutationQueue.shift();
    try {
      await mutation.fn();
    } catch (err) {
      // Откат для этой мутации
      mutation.rollback?.();
    }
  }
  isProcessing = false;
}

Это гарантирует, что мутации выполняются по очереди, даже если пользователь спамит кнопку.

Поспешу наслаждаться результатом

Svelte 5 с рунами переносит нас в будущее, где реактивность - это не магия, а явный контроль. TanStack Query превращает сложное управление асинхронным состоянием в простую конфигурацию. Вместе они создают идеальную среду для оптимистичных мутаций, которые раньше требовали уйму boilerplate.

Остаётся только помнить про edge cases и не забыть про типизацию TypeScript - и тогда твой код будет не просто работающим, но и красивым. Код, который хочется перечитывать, а не от него бежать.