100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
Web

Preact

IntermediateFramework3.8K learners

Preact is a fast, 3KB alternative to React that implements the same modern API — components, hooks, and virtual DOM — in a much smaller package, often as a drop-in replacement.

Definition

Preact is a fast, 3KB alternative to React that implements the same modern API — components, hooks, and virtual DOM — in a much smaller package, often as a drop-in replacement.

Overview

Preact was created to answer a simple question: how much of React's developer experience can be preserved in a fraction of its file size? By reimplementing a compatible subset of the React API — including hooks, JSX, and the component model — on a lean virtual DOM implementation, Preact lets teams keep React's familiar patterns while shipping significantly less JavaScript to the browser. A compatibility layer, `preact/compat`, allows many existing React libraries and codebases to run on Preact with little or no code changes, which makes it a popular choice for aliasing React to Preact in a build configuration to shrink bundle size without rewriting an application. This is especially valuable for performance-sensitive contexts like mobile web, embeddable widgets, and progressive web apps where every kilobyte affects load time and Core Web Vitals. Preact is widely used in production by companies optimizing for performance budgets, and it has become a common recommendation in web performance guides alongside techniques like code splitting and Server-Side Rendering (SSR) for reducing time-to-interactive. It is often mentioned alongside JavaScript in this space.

Key Features

  • React-compatible API including hooks, JSX, and component patterns
  • Roughly 3KB gzipped core size, far smaller than React's runtime
  • `preact/compat` layer for running many existing React libraries unmodified
  • Fast virtual DOM diffing optimized for small bundle footprint
  • Signals-based state management option for fine-grained reactivity
  • Works well with existing build tools like Vite and Webpack
  • Suitable for progressive enhancement and widget-style embeds

Use Cases

Reducing JavaScript bundle size in performance-critical applications
Building lightweight, embeddable widgets on third-party pages
Progressive Web Apps optimizing for fast load and Core Web Vitals
Migrating an existing React app to a smaller runtime via aliasing

Frequently Asked Questions