Features
- 3kb gzipped with full component model
- React-compatible API (hooks, context, refs)
- Signals for fine-grained reactivity
- preact/compat for drop-in React replacement
- Fast virtual DOM diffing algorithm
Pros
- Tiny bundle size ideal for performance-critical apps
- Drop-in React replacement via compat layer
- Same mental model and API as React
Cons
- Some React libraries may have subtle incompatibilities
- Smaller ecosystem than React itself
- Synthetic events differ slightly from React
Overview
Preact is a fast 3kb alternative to React with the same modern API. It provides the thinnest possible virtual DOM abstraction on top of the DOM, building on stable platform features and registering real event handlers. Preact can be used directly in the browser without any build steps.
With preact/compat, Preact offers a thin compatibility layer that makes it possible to use virtually any React library with Preact. Preact also introduced Signals — a reactive primitive that provides fine-grained reactivity on top of the component model, giving you the best of both worlds: familiar React patterns with reactive performance.
When to Use
Preact is ideal when you need React compatibility but bundle size is a constraint, such as embedded widgets, mobile web apps on slow networks, or any project where every kilobyte matters. It’s also great for teams that want to leverage the React ecosystem without the full React runtime cost.
Getting Started
npx create-vite my-app --template preact-ts
cd my-app && npm install && npm run devimport { signal } from "@preact/signals";
const count = signal(0);
function Counter() {
return <button onClick={() => count.value++}>Count: {count}</button>;
}