Preact

Preact is a tiny, React-compatible UI library that gives you the familiar component model and Virtual DOM feel of React, but with a ferociously small footprint and a focus on shipping less JavaScript. It intentionally stays close to the DOM while keeping the API ergonomics that React developers know and love. Because it aims to be API-compatible, you can often swap a subset of React code to run on Preact with minimal changes.

It is not the most obvious go-to framework, I’d personally only pick it if my goal is to have a small (in KB) project, otherwise I’d personally prefer the alternatives.

The Use Case

When to use (pros)

• Tiny bundle size: Preact is famously small (a few KB zipped), which makes it ideal for performance-sensitive pages and first-byte constrained environments.
• Almost drop-in React compatibility: The compat layer and close API shape let you reuse many React libraries and patterns. That means you get React ergonomics with much less payload.
• Fast time to interactive: Less JS to parse and execute pushes Time To Interactive down on slow networks and devices.
• Good for static sites and microfrontends: If your app is mostly server-rendered or static and needs small, snappy client bits, Preact fits nicely.
• Modern features like Signals: Preact has invested in reactive primitives (Signals) that offer efficient updates with simpler ergonomics compared to some alternatives.
• Low surface area: Fewer moving parts can mean easier reasoning about performance and less runtime cost on low-powered devices.

When not to use (cons)

• Not a full framework: Preact focuses on the view layer. You still need routing, build setups, state solutions (if you need more than Signals), and other infra.
• Edge cases with third-party libraries: Most React libs work, but some assume React internals or rely on specific behaviors. compat solves many but not all mismatches.
• Ecosystem size: The ecosystem and community are smaller than React’s. That can mean fewer tutorials, tooling integrations, and “plug and play” libraries.
• Learning curve for advanced patterns: If you rely heavily on React-specific internals or complex ecosystem tools, porting can take time.
• Server-side and SSR nuances: Preact works with SSR and SSGs, but you may need to check compatibility for advanced SSR setups.

Quote

“Preact is far from dead.” _{- Marvin Hagemeister May 23, 2024}

Suitability by Project Scale

Large companies

• Pros: Can save bundle weight for customer-facing apps with millions of users, improving load times and cutting CDN costs. Great for embedding into microfrontends or performance-critical experiences.
• Cons: Ecosystem mismatch may slow down teams relying on specialized React libraries. For large organisations, the cost of retraining and debugging edge cases might outweigh the performance wins.

Smaller projects

• Pros: Perfect for lightweight dashboards, static sites, or marketing pages where React would be overkill. Bundle size savings are meaningful, and setup is simple.
• Cons: If you expect to scale into a bigger app later, you may hit limitations with ecosystem tools and community support.

Personal / indie projects

• Pros: Excellent choice for hobby projects, portfolios, indie apps, or experiments. Small footprint, quick setup, and you don’t ship unnecessary bloat to users. Also feels familiar if you already know React.
• Cons: You’ll need to piece together routing, state, and other tools manually if your indie project grows larger. And you may find fewer tutorials compared to React or Vue.