В каких случаях имеет смысл использовать Preact?

Preact — это библиотека для построения пользовательских интерфейсов, которая повторяет модель React: компоненты, JSX, виртуальный DOM, хуки. Главное отличие — размер: ядро Preact занимает около 3 КБ в сжатом виде, тогда как React с react-dom — более 40 КБ. Это делает Preact привлекательным там, где каждая килобайтная экономия влияет на скорость загрузки и метрики Core Web Vitals.

Когда Preact действительно оправдан

• Лендинги и маркетинговые страницы, где важна скорость первой отрисовки.
• Встраиваемые виджеты и микрофронтенды, которые грузятся на чужих сайтах.
• Мобильные веб-приложения с медленным соединением.
• Небольшие SPA, где не нужны тяжёлые экосистемные решения React.
• Проекты, где уже есть React-код, но хочется уменьшить бандл без переписывания.

Совместимость с React

Preact предоставляет пакет preact/compat, который эмулирует API React и react-dom. Это позволяет использовать большинство React-библиотек и компонентов без изменений. Достаточно настроить алиасы в сборщике.

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils'
    }
  }
};

// Компонент остаётся прежним
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Ограничения и подводные камни

• Некоторые новые API React (например, отдельные части Concurrent Mode) реализованы не полностью.
• Экосистема инструментов и отладки ориентирована в первую очередь на React.
• При использовании preact/compat часть выигрыша в размере теряется.
• Серверный рендеринг работает, но требует внимательной настройки.

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