# 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 as a script file and run:

## 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: 完全兼容 React 吗？**
A: 用 `preact/compat` 大部分 React 库可以直接用。某些依赖 React 内部（React Native、React Hook Form 某些版本）可能不兼容。

**Q: 性能真的比 React 快？**
A: 启动和初次渲染更快（小 runtime）。大型应用的 diff 性能差距不大。

**Q: 什么场景用 Preact？**
A: 对 bundle 大小敏感的场景：Landing page、Islands architecture（Astro）、嵌入式 widget、PWA。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/70e5a9d3-35a3-11f1-9bc6-00163e2b0d79
Author: Script Depot