Экспериментальные возможности

Сигналы — одна из ключевых экспериментальных возможностей Preact, предлагающая альтернативную модель реактивности по сравнению с традиционным useState и useReducer. Сигнал представляет собой объект с единственным свойством .value, изменение которого автоматически приводит к обновлению всех зависимых вычислений и компонентов.

import { signal } from '@preact/signals';

const count = signal(0);

count.value++;

В отличие от хуков, сигналы:

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

Использование сигнала внутри JSX приводит к подписке компонента на изменения:

function Counter() {
  return <span>{count}</span>;
}

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

Вычисляемые сигналы (Computed)

Вычисляемые сигналы (computed) позволяют описывать производные значения, которые автоматически пересчитываются при изменении зависимостей.

import { computed } from '@preact/signals';

const doubled = computed(() => count.value * 2);

Особенности:

  • ленивое вычисление — значение пересчитывается только при необходимости;
  • кэширование — повторное чтение без изменений зависимостей не вызывает пересчёт;
  • автоматическое управление зависимостями.

Такая модель близка к функционально-реактивному программированию и хорошо подходит для сложной бизнес-логики.

Эффекты сигналов

Для выполнения побочных эффектов при изменении сигналов используется effect:

import { effect } from '@preact/signals';

effect(() => {
  console.log('Текущее значение:', count.value);
});

Эффект автоматически подписывается на все сигналы, которые были прочитаны внутри функции. При изменении любого из них эффект будет выполнен повторно. Очистка ресурсов поддерживается через возврат функции:

effect(() => {
  const id = setInterval(() => {
    console.log(count.value);
  }, 1000);

  return () => clearInterval(id);
});

Автоматическая оптимизация рендеринга

Экспериментальная система рендеринга Preact использует сигналы для частичного обновления виртуального DOM. Компоненты больше не обязательно перерендериваются целиком — обновляются только узлы, напрямую использующие изменённые сигналы.

Ключевые аспекты:

  • обход без повторного вызова функции компонента;
  • минимизация reconciliation;
  • отсутствие необходимости в memo, useCallback, useMemo в большинстве случаев.

Это меняет подход к проектированию компонентов: логика состояния может быть вынесена за пределы компонентов без потери реактивности.

Серверные компоненты (Preact Server Components)

Поддержка серверных компонентов находится в экспериментальной стадии и развивается параллельно с аналогичными возможностями React. Компоненты, выполняемые на сервере:

  • не включаются в клиентский бандл;
  • могут напрямую обращаться к файловой системе и базе данных;
  • возвращают сериализуемое описание UI.
// server-component.jsx
export async function UserProfile() {
  const user = await db.getUser();
  return <div>{user.name}</div>;
}

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

Частичная гидратация (Islands Architecture)

Preact активно экспериментирует с архитектурой «островов». Статический HTML генерируется на сервере, а гидратации подвергаются только интерактивные участки.

Особенности реализации:

  • компоненты помечаются как интерактивные;
  • остальной DOM остаётся статическим;
  • загрузка JavaScript происходит по требованию.
<Island component={InteractiveWidget} />

Такой подход особенно эффективен для контентных сайтов, где интерактивность локализована.

Асинхронный рендеринг и Suspense

Поддержка Suspense в Preact продолжает развиваться и включает экспериментальные улучшения:

  • более тонкий контроль над моментом отображения fallback;
  • поддержка асинхронных источников данных вне React-специфичных API;
  • интеграция с серверным рендерингом.
<Suspense fallback={<Loader />}>
  <AsyncComponent />
</Suspense>

В сочетании с серверными компонентами и сигналами Suspense позволяет выстраивать сложные цепочки загрузки данных без явного управления состояниями загрузки.

Пользовательские рендереры

Preact предоставляет экспериментальный API для создания собственных рендереров. Это позволяет использовать Preact как универсальное описание UI, не ограничиваясь DOM.

Примеры областей применения:

  • рендеринг в Canvas или WebGL;
  • терминальные интерфейсы;
  • нестандартные среды выполнения.

Рендерер реализует минимальный набор операций:

  • создание узлов;
  • обновление свойств;
  • управление иерархией.

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

Совместимость с будущими стандартами

Экспериментальные возможности Preact часто служат полигоном для опережающей поддержки новых идей экосистемы Jav * aScript:

  • TC39-предложения, влияющие на реактивность;
  • новые подходы к модульности и ленивой загрузке;
  • улучшения в области Web Components.

Фреймворк сохраняет компактность ядра, вынося экспериментальные функции в отдельные пакеты, что позволяет использовать их выборочно без увеличения базового веса приложения.

Оглавление