Preact vs React
Preact is a 3KB alternative to React. Same API. Same component model. A fraction of the size. Jason Miller built it to prove you don't need 40KB of JavaSc...
14 Oct 2023

Preact is a 3KB alternative to React. Same API. Same component model. A fraction of the size. Jason Miller built it to prove you don't need 40KB of JavaScript to build a virtual DOM framework.
What Preact gives you
- 3KB gzipped. React is ~40KB. On slow networks, that difference is felt.
- Faster rendering. Less code means less to parse and execute. Preact consistently benchmarks faster than React.
- Same API. You write components the same way. JSX, hooks, functional components -- it all works. There's even a
preact/compatlayer that lets you use React libraries with zero code changes. - Closer to the DOM. Preact uses the browser's native event system instead of a synthetic event layer. Less abstraction, less overhead.
What you give up
- Ecosystem. React has Meta behind it and a massive community. Some libraries are React-only and won't work with
preact/compat. - Concurrent features. React 18+ introduced concurrent rendering,
useTransition, and Suspense for data fetching. Preact doesn't have these. - Synthetic events. React's synthetic event system normalizes browser differences. Preact skips this, which is fine for modern browsers but can bite you on edge cases.
- Battle-tested at scale. React powers Facebook, Instagram, and thousands of large-scale apps. Preact is production-ready, but the scale of testing is different.
When to use Preact
Preact shines when bundle size is the primary constraint. Think embedded widgets, performance-critical landing pages, or apps targeting low-end devices on slow networks.
If your project is small to medium-sized, doesn't need concurrent rendering, and every kilobyte matters, Preact is a strong choice. You get 90% of React's capability at a tenth of the size.
For complex apps that need React's full feature set -- concurrent rendering, Suspense, server components -- stick with React. The extra 37KB buys you real capabilities.