ScriptsApr 11, 2026·1 min read

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.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm init preact
# Or manually
npm i preact
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:

// 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.

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Babylon.js — Powerful 3D Game and Rendering Engine

Babylon.js is a powerful, beautiful, simple, open 3D game and rendering engine for the web. WebGL + WebGPU, Playground IDE, Node Material Editor, GUI system, physics, and VR/AR support. Microsoft-backed with enterprise polish.

Script Depot

Alpine.js — Rugged Minimal JS Framework for Your Markup

Alpine.js is a rugged, minimal framework for composing JavaScript behavior directly in your HTML markup. Like jQuery for the modern web but declarative — reactive data, directives, and state with 15KB gzipped and zero build step.

Script Depot

PixiJS — The HTML5 Creation Engine with Fast 2D WebGL

PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Powers interactive ads, games, data viz, and rich media experiences. Used by Google, IKEA, Disney, and countless HTML5 games on Poki and CrazyGames.

Script Depot
◈Home🔍Search👤Me