Preact Explained: React, But 3 Kilobytes

Introduction

React (covered earlier) is the default UI library — and, at around 40KB compressed plus its ecosystem, a heavy one for widgets, embeds, and performance-critical pages. Preact, released in 2015, asks a simple question: what if you kept React's API and dropped the weight? At about 3KB, Preact implements the same component model, hooks, and JSX, and most React code runs on it unchanged through a compatibility layer. It is the framework for places where every kilobyte counts.

The same API, a fraction of the size

Preact's compatibility is deliberate:

• Same API — components, hooks (useState, useEffect), and JSX work as in React; preact/compat adds the remaining React APIs (like React.memo and synthetic events) for libraries that expect them.
• Tiny core — 3KB means Preact loads fast on slow networks and embeds well in pages that are not primarily React apps: widgets, ads, and progressive enhancement.
• Signals option — Preact Signals (like Solid's, batch 28) offer fine-grained reactivity as an alternative to re-rendering, for performance-critical components.
• Drop-in migration — aliasing react to preact/compat in a bundler often migrates an app with no code changes, which is how teams adopt it incrementally.

A component shows the familiarity — if you know React, you already know this:

import { useState } from "preact/hooks";
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

The only visible difference is the import path. That familiarity is Preact's whole pitch: React skills, a tenth of the size.

The honest trade

Preact's trade is edge-case compatibility: a few React libraries depend on React internals that preact/compat does not perfectly replicate, and its ecosystem and job market are far smaller. React's concurrent features and newest APIs also arrive later, if at all. The rule of thumb: Preact when size and load time dominate — widgets, embeds, slow networks; React when ecosystem depth, hiring, or cutting-edge features matter most.

Takeaway

Preact is React, but 3 kilobytes: the same components, hooks, and JSX, with a compat layer for most React code and signals for fine-grained updates. It trades ecosystem depth for size — and when every kilobyte counts, that trade wins.

Originally published at https://practicaldevblog.blogspot.com/2026/10/preact-explained-react-but-3-kilobytes.html