Preact

Preact
Name	Preact
Developer	Jason Miller
Initial release	2015
Written in	JavaScript
License	MIT License
Website	Preact Homepage

Preact Preact is a lightweight JavaScript library for building user interfaces that emphasizes minimal size, high performance, and a React-compatible API. It is used by developers, companies, and open-source projects seeking a compact alternative to larger libraries while maintaining interoperability with React (library), Node.js, V8 (JavaScript engine), Chromium, Mozilla Firefox, and WebKit. Major adopters include engineering teams at companies such as Google, Microsoft, IBM, Spotify, and Uber Technologies.

Overview

Preact provides a virtual DOM implementation and component model influenced by React (library), offering JSX support interoperable with tools from Babel (software), TypeScript, ESLint, Webpack, and Rollup (software). The library targets modern browsers like Google Chrome, Safari, Microsoft Edge, and Firefox, as well as server environments such as Node.js and platforms built on Electron (software framework). Preact is maintained by contributors from the wider open-source ecosystem, including members active in GitHub, npm, and communities like Stack Overflow and Dev.to.

History and Development

Preact was created to address performance and bundle-size concerns raised by large applications and frameworks in the mid-2010s, during the rise of React (library), AngularJS, and Ember.js. Initial development began in the environment shaped by contributors familiar with Google Chrome V8, Mozilla Firefox Quantum, and the evolution of ECMAScript. Over time, Preact evolved alongside tooling improvements from Babel (software), the adoption of JSX syntax popularized by React (library), and packaging advances from Webpack and Rollup (software). Major milestones include releases that improved compatibility with React (library), integrations with TypeScript, and optimizations for progressive web apps championed by projects influenced by Service Worker advocates at Google.

Architecture and Core Concepts

Preact implements a minimal Virtual DOM inspired by implementations in React (library) and concepts formalized in discussions at TC39. Its core includes a lightweight component class and functional component support comparable to patterns used in React (library), with lifecycle hooks analogous to methods documented by React (library). Preact's reconciliation process draws on algorithmic foundations related to work by engineers at Facebook and perf-tuning strategies used in Google Chrome engineering. The library is commonly paired with JSX transpilation using Babel (software) and type-checking via TypeScript or Flow (type checker), and integrates with test runners like Jest and Mocha (software).

API and Compatibility

Preact exposes an API surface similar to React (library), enabling many components and libraries authored for React to be used with adapters or compatibility layers authored by the community on npm. Compatibility shims and aliases allow interoperability with routing libraries such as React Router, state managers like Redux, and form libraries originally designed for React (library). Integration patterns reference tooling from ESLint, Prettier, and build systems including Parcel, Webpack, and Rollup (software). Server-side rendering strategies mirror approaches used in Next.js and Gatsby (software), while working with servers using Express (web framework) or platform services from AWS Lambda and Cloudflare Workers.

Performance and Size Characteristics

Preact's design prioritizes small gzip/minified bundle sizes and fast runtime characteristics on engines like V8 (JavaScript engine) and SpiderMonkey. Benchmarks compare Preact against React (library), Vue.js, Svelte, and Angular (software) in contexts such as initial load, update throughput, and memory usage measured in environments including Google Chrome and Firefox. The library's slim runtime enables deployments targeting constrained environments similar to those supported by frameworks used in AMP Project pages and lightweight client-rendering strategies employed by teams at Twitter and Pinterest.

Ecosystem and Tooling

An ecosystem of plugins, devtools, and integrations surrounds Preact with community projects on GitHub and packages distributed via npm. Developer tooling includes integrations with browser extensions inspired by React Developer Tools, build optimizers in Webpack and Rollup (software), and scaffolding templates comparable to starters from Create React App and Next.js. State management solutions adapted from Redux and MobX exist alongside routing alternatives influenced by React Router. Testing integrations leverage frameworks such as Jest, Mocha (software), and Karma (test runner), while CI/CD workflows commonly integrate with services like Travis CI, CircleCI, and GitHub Actions.

Adoption and Use Cases

Preact is used in single-page applications, progressive web apps, microfrontends, server-rendered sites, and embedded widgets by organizations including Google, Microsoft, IBM, Spotify, Uber Technologies, Mozilla, BBC teams, and startups across sectors. Use cases include performance-critical landing pages, ad-tech creatives, and browser extensions where bundle size and load time are constrained by distribution platforms like Chrome Web Store and Firefox Add-ons. Educational resources and tutorials appearing on MDN Web Docs, freeCodeCamp, and Codecademy help developers migrate concepts from React (library) to Preact patterns, while conferences like JSConf, ReactConf, and Chrome Dev Summit have featured talks comparing approaches to UI rendering.

Category:JavaScript libraries