preact

Preact is a fast, lightweight alternative to React that implements the same modern component API — ES6 classes, hooks, and functional components — in roughly 3-4kB gzipped. It provides a highly optimized Virtual DOM diffing algorithm, seamless server-side-render hydration, and a pluggable asynchronous rendering scheduler.

Through the preact/compat alias, Preact offers extensive drop-in compatibility with the React ecosystem, letting most React libraries and components run unmodified on top of Preact’s smaller runtime. It also ships companion packages for debugging (preact/debug), DevTools integration, and hooks, and supports all modern browsers.

What You Get

• A ~3-4kB Virtual DOM library implementing the same component model as React (classes, hooks, function components)
• preact/compat, a compatibility layer that lets most React libraries run unmodified on top of Preact
• First-class hooks support (useState, useEffect, useMemo, etc.) via the built-in preact/hooks package
• Server-side rendering support with efficient client-side hydration
• preact/debug for development-time warnings and preact/devtools for browser DevTools integration
• A pluggable, transparent asynchronous rendering scheduler

Common Use Cases

• Migrating a React app to a smaller runtime to reduce bundle size and improve load performance
• Building performance-sensitive, low-bandwidth web apps (PWAs, widgets, embeds) that need a minimal footprint
• Using existing React component libraries in a Preact app via the preact/compat alias
• Server-rendering a component tree and hydrating it efficiently on the client

Under The Hood

Architecture - Preact’s core (src/) implements a Virtual DOM diffing engine with dedicated modules for diff, create-element, and component lifecycle handling; compat/ layers a React-API-compatible shim on top of the core renderer, hooks/ implements the hooks runtime independently pluggable into the core, and debug//devtools/ provide opt-in development tooling without bloating the production bundle. Tech Stack - Written in plain JavaScript (with TypeScript type definitions under types/), bundled to ESM (dist/preact.mjs) via Preact’s own build scripts, with jsx-runtime/ providing the automatic JSX transform entry point; monorepo packages (core, compat, hooks, debug, devtools) are versioned and published together. Code Quality - The test/ directory (8 top-level suites, each covering deep sub-scenarios) exercises rendering, hydration, hooks, and compat behavior across browsers via Karma/Vitest, with coverage tracked on Coveralls; a benchmarks/ suite tracks rendering performance regressions, and mangle.json configures aggressive minification tested against a strict size budget enforced in CI. API Design - Preact deliberately mirrors React’s public API (createElement, Component, hooks) so existing React knowledge transfers directly, while preact/compat absorbs most remaining differences (e.g. synthetic event names, forwardRef) transparently, making the migration path from React close to a one-line import swap for many projects.