# Preact — Fast 3kB React Alternative with Same Modern API

> Preact is a fast 3kB alternative to React with the same modern API. Virtual DOM, Components, Hooks — all in a tiny package. Drop-in compatible via preact/compat. Perfect for performance-critical apps and islands architecture.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm init preact
# Or manually
npm i preact
```

```tsx
import { render } from "preact";
import { useState } from "preact/hooks";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

render(<Counter />, document.getElementById("app")!);
```

Alias React → Preact for drop-in replacement:
```js
// vite.config.ts
import preact from "@preact/preset-vite";
export default {
  plugins: [preact()],
  resolve: {
    alias: {
      "react": "preact/compat",
      "react-dom": "preact/compat",
    },
  },
};
```

## Intro

Preact is a fast 3kB alternative to React with the same modern API. Created by Jason Miller, Preact trades some React internals (like SyntheticEvent pooling) for a tiny size. The compat layer (`preact/compat`) makes it a drop-in replacement for most React libraries.

- **Repo**: https://github.com/preactjs/preact
- **Stars**: 38K+
- **Size**: ~3KB gzipped (vs React 45KB)
- **License**: MIT

## What Preact Does

- **Same API as React** — components, hooks, context, suspense
- **Virtual DOM** — efficient diffing, smaller runtime
- **preact/compat** — React drop-in replacement
- **preact/signals** — fine-grained reactive primitives
- **preact/hooks** — same hooks API as React
- **SSR** — `preact-render-to-string`
- **Islands architecture** — Astro + Preact is a common combo

## Architecture

Core is a minimal virtual DOM differ. Components can be functional or class. No SyntheticEvent system (uses native events). Smaller runtime overhead means faster boot and smaller bundles.

## Self-Hosting

Client library. Pairs with Vite, Astro, Next.js (via preact adapter).

## Key Features

- 3KB gzipped runtime
- React-compatible API
- Hooks, Context, Suspense
- React compat mode
- Signals (fine-grained reactivity)
- SSR support
- No legacy baggage
- Tiny JSX runtime

## Comparison

| Library | Size | API | React Ecosystem | Reactivity |
|---|---|---|---|---|
| Preact | 3KB | React-like | Compat layer | VDOM |
| React | 45KB | Original | Full | VDOM |
| Inferno | 8KB | React-like | Limited | VDOM |
| Solid | 8KB | JSX | Limited | Fine-grained |
| Svelte | Variable | Own | Own | Compiled |

## FAQ

**Q: Is it fully compatible with React?**
A: With `preact/compat`, most React libraries work directly. Some libraries that rely on React internals (React Native, certain versions of React Hook Form) may not be compatible.

**Q: Is it really faster than React?**
A: Startup and initial render are faster (small runtime). The diff performance gap narrows in large applications.

**Q: When should I use Preact?**
A: Scenarios where bundle size matters: landing pages, islands architecture (Astro), embedded widgets, and PWAs.

## Sources & Credits

- Docs: https://preactjs.com
- GitHub: https://github.com/preactjs/preact
- License: MIT

---
Source: https://tokrepo.com/en/workflows/preact-fast-3kb-react-alternative-same-modern-api-70e5a9d3
Author: Script Depot