Preact ist eine JavaScript-Bibliothek für Benutzeroberflächen, die die Schreibweise von React übernimmt und dabei nur rund drei Kilobyte wiegt. Entwickelt hat sie Jason Miller, erschienen ist sie 2015.
- Preact
Eine JavaScript-Bibliothek mit der Schreibweise von React und einem Bruchteil von dessen Dateigröße.
Beispiel: „Für den Konfigurator auf der Produktseite reicht Preact, und die Seite bleibt spürbar leichter.“Abgrenzung zu React: Komponenten, Hooks und JSX funktionieren fast gleich. Preact verzichtet auf einige Sonderfunktionen und nutzt die Ereignisse des Browsers direkt, statt ein eigenes Ereignissystem nachzubauen.
Wie Preact mit React zusammenpasst
Über eine Kompatibilitätsschicht namens preact/compat. Sie bildet die Programmierschnittstelle von React nach, sodass sich viele Pakete aus dem React-Umfeld ohne Änderung mit Preact verwenden lassen.
Im Projekt wird dazu im Bundler hinterlegt, dass jeder Import von React auf Preact zeigt. Der restliche Code bleibt, wie er ist.
Wann Preact die bessere Wahl ist
Wenn ein interaktiver Teil auf einer sonst einfachen Seite sitzt und jedes Kilobyte zählt: ein Rechner, ein Filter, ein eingebettetes Widget. Die Ladezeit schlägt sich in den Core Web Vitals nieder, und dort fällt eine kleine Bibliothek weniger ins Gewicht.
Auch Astro bietet Preact als schlanke Option für einzelne interaktive Inseln an. Den Begriff dieser Insel-Architektur hat Jason Miller 2020 selbst bekannt gemacht.
Wo Preact an Grenzen kommt
Bei Paketen, die tief in die Innereien von React greifen. Die Kompatibilitätsschicht deckt den Alltag ab, neue Funktionen von React kommen bei Preact aber verzögert oder gar nicht an.
Für eine große Anwendung, die eng am React-Ökosystem hängt, ist das Original deshalb meist der sicherere Weg.