Czym jest Preact? Lekka alternatywa dla Reacta i kiedy ją wybrać

Preact to jedna z mniej znanych, ale często używanych technologii frontendowych: na npm pobiera się ją kilka razy rzadziej niż Reacta, ale wciąż częściej niż Vue czy Angulara. Ten artykuł wyjaśnia, czym jest Preact, pokazuje działający przykład i mówi, kiedy warto go wybrać. Pisze go osoba, która na co dzień uczy Reacta, więc od razu zaznaczam: na wejście do frontendu rekomendujemy React. Preacta przedstawiam rzetelnie, a uzasadnienie rekomendacji znajdziesz niżej.

Czym jest Preact?

Według oficjalnej strony Preact to „szybka alternatywa dla Reacta o rozmiarze 3 kB, z tym samym nowoczesnym API”. Podobnie jak React opisuje interfejs jako drzewo komponentów i trzyma w pamięci jego uproszczoną kopię, tzw. virtual DOM (virtual DOM), którą porównuje z poprzednią wersją, żeby zmienić na stronie tylko to, co trzeba. Twórcy podkreślają dwie rzeczy:

• Mały rozmiar. Sam rdzeń ma około 3 kB (podawane przez twórców), więc to Twój kod jest największą częścią aplikacji, a nie biblioteka.
• Bliskość przeglądarki. Preact rejestruje zwykłe zdarzenia DOM przez addEventListener, zamiast budować własny system zdarzeń jak React.

Aktualna wersja to Preact 11 (11.1.1 na dzień 5 listopada 2026). Preact można też uruchomić bez żadnego narzędzia budującego: wystarczy <script type="module"> i import z CDN, np. razem z biblioteką HTM, która zastępuje JSX szablonami tekstowymi. Dla porównania Reacta zwykle uruchamia się przez bundler.

Jedna ważna uwaga: jeśli jesteś zupełnie nowy we frontendzie, nie zaczynaj od wyboru biblioteki. Najpierw opanuj podstawy HTML, CSS i JavaScriptu, a dopiero potem komponenty.

Jak wygląda aplikacja w Preact? Przykład listy zadań

Ta sama aplikacja co w artykułach o Reaccie i Vue (pole, przycisk „Dodaj”, licznik i lista zadań), tym razem w Preact 11, uruchomiona w projekcie utworzonym przez npm create vite@latest -- --template preact. W pliku app.jsx:

import { useState } from "preact/hooks";

export function App() {
  const [text, setText] = useState("");
  const [tasks, setTasks] = useState([]);

  function addTask(event) {
    event.preventDefault();
    if (!text.trim()) return;
    setTasks([...tasks, { id: Date.now(), title: text.trim() }]);
    setText("");
  }

  return (
    <main>
      <h1>Lista zadań</h1>
      <form onSubmit={addTask}>
        <input
          value={text}
          onInput={(event) => setText(event.currentTarget.value)}
          placeholder="Nowe zadanie"
        />
        <button type="submit">Dodaj</button>
      </form>
      <p>Liczba zadań: {tasks.length}</p>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </main>
  );
}

W Chrome (bez interfejsu, sterowanym skryptem) dodałem dwa zadania („Kupić mleko”, „Napisać artykuł”). Licznik pokazał „Liczba zadań: 2”, lista zawierała oba wpisy, a konsola nie zgłosiła błędów.

Jeśli znasz React, kod wygląda znajomo: komponent to funkcja, stan trzyma useState, a listę buduje map z atrybutem key. Różnice są dwie, i obie mają znaczenie:

• Hooki importujesz z preact/hooks, a nie z react.
• Pole tekstowe obsługujesz przez onInput, a nie onChange. O tej pułapce piszę niżej.

Czym Preact różni się od Reacta?

Według dokumentacji Preact nie jest reimplementacją Reacta, więc różnic trochę jest. Najważniejsze z nich:

Dwie rzeczy w tej tabeli warto zapamiętać. Po pierwsze, Preact działa bliżej przeglądarki niż React, co tłumaczy jego rozmiar. Po drugie, ta bliskość oznacza, że czasem zachowuje się inaczej, niż podpowiada Ci wiedza z Reacta.

Dlaczego onChange w Preact nie działa jak w Reaccie?

To najczęstsza pułapka osoby, która przychodzi z Reacta, więc ją sprawdziłem. Pole tekstowe z onChange, które zapisuje wartość w stanie:

import { useState } from "preact/hooks";

export function App() {
  const [value, setValue] = useState("");
  return (
    <main>
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
      <p>Stan: [{value}]</p>
    </main>
  );
}

W czystym Preact po wpisaniu „abc” stan nadal był pusty (Stan: []), a zaktualizował się dopiero po przejściu do innego pola klawiszem Tab (Stan: [abc]). Dzieje się tak dlatego, że Preact używa standardowego zdarzenia change z DOM, które odpala się po opuszczeniu pola. Zdarzenie wywoływane przy każdym znaku to w DOM input, czyli onInput w Preact. React po cichu zmienia znaczenie onChange, dlatego ten sam kod w Reaccie działa „na żywo”.

Ten sam kod z aliasem do preact/compat aktualizował stan od razu po wpisaniu. Co to jest preact/compat, wyjaśniam w następnej sekcji.

Czym jest preact/compat i czy mogę używać bibliotek Reacta?

preact/compat to cienka warstwa zgodności, która udostępnia w Preact API Reacta (useState, useEffect, memo, forwardRef i inne), a także zachowanie onChange z Reacta. Dokumentacja opisuje ją jako warstwę, która „stara się osiągnąć 100% zgodności” z Reactem, i podaje, że zgodność jest mierzona względem bieżącej i poprzedniej wersji głównej Reacta. W praktyce:

1. W bundlerze ustawiasz alias: react i react-dom wskazują na preact/compat.
2. Kod napisany pod Reacta, w tym biblioteki z npm (np. do formularzy czy animacji), importuje react, a faktycznie dostaje Preact.
3. Szablon z @preact/preset-vite robi ten alias za Ciebie.

Sprawdziłem to na tej samej liście zadań, napisanej „po reactowemu” (import { useState } from "react", onChange) i zbudowanej z aliasem: wynik to 17,3 kB (7,3 kB po gzip), czyli o około 3 kB więcej niż wersja czysta, a wciąż mniej niż 10% rozmiaru Reacta. Zaznaczam, że to prosta aplikacja bez bibliotek: w większym projekcie rozmiar zależy głównie od Twoich zależności, a nie od samej biblioteki do interfejsu. Nie każda biblioteka Reacta zadziała (te, które sięgają do wewnętrznych mechanizmów Reacta, mogą się przewrócić), więc po zmianie aliasu trzeba projekt po prostu przetestować.

Czym są signals w Preact?

Preact ma własny, opcjonalny mechanizm zarządzania stanem: sygnały (signals), dostępne w pakiecie @preact/signals (wersja 2.11.4 na 5 listopada 2026). Według dokumentacji sygnały to proste jednostki reaktywne: gdy zmieni się ich wartość, aktualizują się dokładnie te komponenty i fragmenty interfejsu, które z nich korzystają. Ta sama lista zadań na sygnałach:

import { signal, computed } from "@preact/signals";

const text = signal("");
const tasks = signal([]);
const count = computed(() => tasks.value.length);

function addTask(event) {
  event.preventDefault();
  if (!text.value.trim()) return;
  tasks.value = [...tasks.value, { id: Date.now(), title: text.value.trim() }];
  text.value = "";
}

export function App() {
  return (
    <main>
      <h1>Lista zadań</h1>
      <form onSubmit={addTask}>
        <input value={text} onInput={(e) => (text.value = e.currentTarget.value)} placeholder="Nowe zadanie" />
        <button type="submit">Dodaj</button>
      </form>
      <p>Liczba zadań: {count}</p>
      <ul>
        {tasks.value.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </main>
  );
}

Co tu widać:

• signal tworzy wartość, którą czytasz i zmieniasz przez .value, podobnie jak ref we Vue.
• computed liczy wartość pochodną (tu liczbę zadań) i sam śledzi, od czego zależy.
• Stan jest poza komponentem, więc nie trzeba go przekazywać przez propsy ani Context.
• Do tekstu {count} można przekazać sam sygnał, bez .value, a Preact zaktualizuje tylko ten węzeł tekstowy.

Uruchomiłem tę wersję w Chrome: wynik taki sam, „Liczba zadań: 2” i dwa wpisy na liście. Bundle wzrósł do 22,0 kB (8,8 kB po gzip). Sygnały to osobna biblioteka, którą można też używać w Reaccie (@preact/signals-react), ale w Preact są jej naturalnym domem.

Czy Preact ma wsparcie dla TypeScripta?

Tak, i to bez doinstalowywania osobnych typów. Według dokumentacji Preact dostarcza własne definicje typów, z których korzysta też sama biblioteka. W pakiecie preact widać je w package.json (pole types wskazuje na src/index.d.ts, a podobne wpisy mają preact/hooks i preact/compat). Szablon npm create vite@latest -- --template preact-ts tworzy projekt w TypeScripcie od razu.

Sprawdziłem to na krótkim komponencie z typowanym stanem i zdarzeniem formularza:

import { useState } from "preact/hooks";

type Task = { id: number; title: string };

export function App() {
  const [text, setText] = useState("");
  const [tasks, setTasks] = useState<Task[]>([]);

  function addTask(event: SubmitEvent) {
    event.preventDefault();
    setTasks([...tasks, { id: Date.now(), title: text.trim() }]);
    setText("");
  }

  return (
    <form onSubmit={addTask}>
      <input value={text} onInput={(event) => setText(event.currentTarget.value)} />
      <p>{tasks.length}</p>
    </form>
  );
}

Kompilator (tsc) przeszedł bez błędów. Gdy w title wstawiłem liczbę 42 zamiast tekstu, zgłosił błąd TS2322, czyli typy rzeczywiście pilnują kodu. Typ zdarzenia w onInput jest wywnioskowany automatycznie, więc event.currentTarget.value jest typowane jako tekst. Jeśli używasz preact/compat, dokumentacja ma osobną sekcję o konfiguracji TypeScripta z aliasami. Nie sprawdzałem tej konfiguracji ani typowania sygnałów. Podstawy TypeScripta znajdziesz w artykule TypeScript jako kolejny krok po JavaScript.

Jakie są mocne strony i ograniczenia Preact?

Mocne strony:

• Rozmiar. W naszej liście zadań: 14,3 kB wobec 220 kB (6,1 kB wobec 68,8 kB po gzip). To minimalna aplikacja zbudowana domyślnymi narzędziami, a nie benchmark.
• Znajomy model. Komponenty, hooki, JSX i key działają jak w Reaccie, więc wiedza z Reacta przenosi się niemal w całości.
• Zgodność z ekosystemem Reacta przez preact/compat.
• Własne typy TypeScripta w pakiecie, bez osobnej instalacji.
• Działa bez bundlera i bez JSX, co jest przydatne w małych widgetach osadzanych na cudzych stronach.

Ograniczenia:

• Mniejsza społeczność niż Reacta. Pytań, tutoriali i gotowych rozwiązań jest wyraźnie mniej, a część materiałów odnosi się do starszych wersji.
• Zgodność z Reactem nie jest pełna. Twórcy deklarują zgodność z bieżącą i poprzednią wersją główną Reacta, więc nowsze funkcje Reacta mogą pojawić się z opóźnieniem lub wcale.
• Pułapki dla osób z Reacta, jak onChange, opisane wyżej.
• Brak danych o rynku pracy. Nie mam liczby ofert na Preact w Polsce, więc jej nie podaję. Sprawdź ją sam na portalach z ofertami, zanim uznasz Preacta za umiejętność, którą ktoś Ci zapłaci.

Preact czy React? Popularność i rankingi

Preact jest więc używany częściej niż Vue i Angular, choć kilkakrotnie rzadziej niż React. Trzeba tu uważać z interpretacją: liczby z npm obejmują pobrania w CI i jako zależność innych pakietów, a nie liczbę programistów, którzy świadomie wybrali tę bibliotekę. Część pobrań to Preact używany pośrednio, jako lżejszy zamiennik Reacta wewnątrz innych narzędzi. To dane o skali użycia, a nie o liczbie ofert pracy. Źródło: API pobrań npm (api.npmjs.org).

Z rankingami opartymi na ankietach jest gorzej. Preact nie występuje w ankiecie Stack Overflow Developer Survey 2025 ani na stronie raportu JetBrains Developer Ecosystem 2025, więc nie porównam go tam z Reactem, Vue i Angularem. Jest za to na liście frameworków w ankiecie State of JavaScript (edycje 2024 i 2025) razem z Reactem, Vue, Angularem, Svelte i Solid. W podsumowaniu edycji 2025 autorzy piszą, że w zakładce „Interest” (zainteresowanie) tylko Solid i Preact zyskały w porównaniu z poprzednim rokiem. Konkretnych procentów nie podaję, bo wykresy ładują się dynamicznie, a ja ich nie odczytałem. Zajrzyj do State of JavaScript 2025, jeśli chcesz zobaczyć dokładne wartości.

Kiedy wybrać Preact, a kiedy React?

Dlaczego na wejście rekomendujemy React?

To nasze zdanie, a nie fakt obiektywny, więc podaję przesłanki:

• React jest wyraźnie popularniejszy (kilka razy więcej pobrań z npm), więc łatwiej o materiały, odpowiedzi na pytania i przykłady kodu.
• Ekosystem wokół Reacta jest szerszy: oficjalna dokumentacja poleca na nim zbudowane frameworki (Next.js, React Router, Expo do aplikacji mobilnych).
• Uczymy Reacta, więc możemy poprowadzić Cię od podstaw do pierwszej pracy z code review.
• Wszystko, czego uczysz się w Reaccie (komponenty, stan, props, hooki), przenosi się na Preacta, więc jeśli później trafisz do projektu w tej bibliotece, nie zaczynasz od zera. Zostaje do nauczenia się garść różnic, jak onInput czy importy z preact/hooks.

To ostatnie jest chyba największą zaletą Preacta dla początkującego: nie musisz wybierać między nim a Reactem na starcie, bo nauka Reacta daje Ci obie umiejętności.

Więcej o Reaccie: czym jest React i dlaczego warto zacząć od niego. Pozostałe duże narzędzia opisują artykuły czym jest Vue i czym jest Angular.

Jak zacząć naukę Preact?

1. Podstawy HTML, CSS i JavaScriptu. Sprawdź, czy rozumiesz tablice, funkcje i map: metody tablicowe w JavaScript.
2. React. Komponenty, stan i hooki poznasz tam z największą liczbą materiałów.
3. Projekt z npm create vite@latest -- --template preact, który tworzy działającą aplikację z Vite.
4. Oficjalny tutorial na preactjs.com, a po nim przepisanie własnego małego projektu z Reacta na Preact, np. wyżej opisanej listy zadań.
5. TypeScript: Preact ma własne typy, więc możesz dodać go do projektu, gdy opanujesz podstawy.

Jeśli wolisz zacząć od technologii, na którą jest największy popyt, i uczyć się z mentorem, który sprawdza Twój kod, zapraszam na kurs frontend online. Prowadzi od JavaScriptu przez React (komponenty, kompozycja, stylowanie, routing, testowanie) po TypeScript i Next.js, z code review i wsparciem w rekrutacji. Preact nie jest elementem programu, ale zasady, których się tam nauczysz, przenoszą się również na niego.

Podsumowanie

• Preact to mała biblioteka do budowania interfejsów z komponentów, o API zbliżonym do Reacta, z hookami z preact/hooks i opcjonalnymi sygnałami.
• W naszej liście zadań paczka ma 14,3 kB (6,1 kB po gzip), przy 220 kB (68,8 kB) dla Reacta.
• Największa pułapka z Reacta to onChange: w czystym Preact odpala się po opuszczeniu pola, a przy każdym znaku trzeba użyć onInput albo preact/compat.
• preact/compat pozwala używać wielu bibliotek Reacta, ale po zmianie aliasu trzeba projekt przetestować.
• Na wejście do frontendu rekomendujemy React, a Preact wybierz, gdy liczy się rozmiar albo wymaga go projekt.