HTML / CSS

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 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 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/compat layer 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.

Keep reading