Разработчики часто жалуются на избыточные обновления DOM в других фреймворках. Сигналы обеспечивают мелкозернистую реактивность - меняется только нужная часть. В итоге приложения работают шустрее, а код становится чище и понятнее.

Что такое руны и сигналы в Svelte 5.2

Руны - это специальные символы вроде $state, $derived и $effect, которые управляют реактивностью прямо в коде. Они заменяют старую compile-time реактивность на runtime-механизм, как в Solid или Knockout. Теперь состояние объявляется просто, без магии компилятора.

Раньше в Svelte 4 использовались стори - writable, readable, derived. Чтобы обновить значение, вызывали set или update, и срабатывали подписки. Это работало, но было неудобно для динамических сценариев. Руны позволяют работать с состоянием как с обычными переменными, но с автоматической реактивностью.

Например, простой счетчик выглядит так:

<script>
  let count = $state(0);
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  clicks: {count}
</button>

Здесь count - реактивный сигнал. При клике значение меняется, и UI обновляется только в нужном месте. Это быстрее, чем перерендер всего компонента.

• $state: Создает реактивное состояние. Изменение автоматически отслеживается.
• $derived: Вычисляемые значения, пересчитываются при изменении зависимостей.
• $effect: Побочные эффекты, как useEffect в React, без явных зависимостей - Svelte сам их определяет.

Сравнение реактивности: Svelte 4 vs Svelte 5.2

В Svelte 4 реактивность работала на этапе компиляции через $:. Зависимости определялись статически, что ограничивало динамику. Например, derived-стори требовали явных подписок и методов обновления.

Сигналы в 5.2 переносят реактивность в runtime. Это позволяет создавать состояния динамически, в циклах или функциях. Производительность растет за счет fine-grained обновлений - меняется только зависимая часть, а не весь список или компонент.

Вот таблица сравнения:

Пример derived в 5.2:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>Count: {count}, Doubled: {doubled}</p>

Doubled пересчитывается автоматически при изменении count. Никаких подписок.

• Зависимости определяются автоматически - не нужно перечислять массивы.
• Поддержка снапшотов - $state.snapshot() для неизменяемых копий.
• Интеграция с SvelteKit 3 для серверных приложений.

Практические примеры использования рун

Давайте разберем реальный сценарий - список задач. В Svelte 4 пришлось бы использовать сторы и $: для фильтров. В 5.2 все проще.

Руны работают везде: в компонентах, классах, даже вне Svelte. Экспортируйте класс с $state для глобального состояния.

<script>
  class Counter {
    count = $state(0);
  }
  let counter = new Counter();
</script>

<button on:click={() => counter.count++}>
  {counter.count}
</button>

Это открывает двери для сложных структур, как графы или динамические формы.

Для эффектов:

<script>
  let count = $state(0);
  $effect(() => {
    console.log('Count changed:', count);
  });
</script>

Svelte сам отслеживает зависимости внутри $effect.

• Списки: each-блок с $state(массив) обновляет только изменившиеся items.
• Формы: Валидация через $derived, без лишних рендеров.
• API-запросы: $effect для fetch с автоочисткой.

Руны открывают новые горизонты

Сигналы и руны в Svelte 5.2 упрощают код, но требуют привыкания к новому синтаксису. Они идеальны для крупных проектов, где динамика и скорость критичны. Осталось место для экспериментов с кастомными реактивными системами поверх рун.

В будущем ждем еще больше интеграций, как с Turbopack или BI-системами. Стоит протестировать на реальных задачах, чтобы увидеть прирост производительности.