DEV Community

Cover image for What’s Preact and What’s the Difference Between Preact and React?
Shariq Ahmed
Shariq Ahmed

Posted on • Edited on • Originally published at Medium

What’s Preact and What’s the Difference Between Preact and React?

If you made an app using React but it’s loading slowly, then it’s high time for you to start using Preact. It’s a fast, and small alternative to React. Further, it is a small library that’s built on top of React. And no, you won’t find it difficult to get started in Preact. This is because both Preact and React share the same API.

In fact, Preact should always be your preference if you want your app to be compatible with both modern web browsers as well as low-end devices. Not sold on this point?

Well, see even Uber used Preact to design m.uber. They even wrote an article on this: Engineering a High-Performance Web App for the Global Market

Main Differences between Preact and React

No doubt, React is more popular than React. But, it’s important to find the difference between the two so that you can take better advantage of both, React and Preact.

1. Size: Preact has a small bundler size (3kB GZip/minified) as compared to React (45kB).
2. Events: React uses synthetic events. Preact ditch this just because of performance and code-size-related issues. It uses addEventListener to register event handlers.
3. Performance: Preact has faster and more efficient virtual DOM implementation than React. So, if performance is important for your app, then instead of React, Preact should be your preference.
4. Hooks: They are used in React. But, in Preact hooks aren't part of the core. Though, you can import hooks from preact/hooks or preact/compat. Hooks are separated so that the size of the main bundle remains small.
5. No Need for Transpilation: In React, developers have to transpile code into Javascript. This can make the development process slow. But, there is no need for transpilation in Preact. Result? Fast build times.

Further, Preact is best for building MVP. This is because of the fast build times, developers can make the functionality of the app quickly and get reviews about the product. It’s also best for creating Progressive Web Applications(PWAs).

But, wait. Can you use Preact to make large apps? Well, yes, you can because it’s not only compatible with React and supports ECMAScript but the CLI - build tool for preact projects - fastens the build-up process as compared to WebPack or Babel.

React should still be your preference if your project is complex and requires feature-rich APIs. And if you are someone who isn’t comfortable using a library that has a large community then Preact shouldn’t be your preference. It has a small community.

Top comments (1)

Collapse
 
kortizti12 profile image
Kevin

Great post, Shariq! You’ve captured the essence of Preact really well—lightweight, efficient, and familiar for those coming from React. I especially like the mention of Uber’s use of Preact for their mobile web app (m.uber). It’s a real-world example showing that Preact isn’t just theoretical—it’s being used at scale where performance matters.

The bundle size difference alone is a major factor—~3KB gzipped versus React’s 45KB makes a huge difference for users on slow networks or low-end devices. Plus, with preact/compat, you can still reuse React libraries, which makes the transition seamless.

You nailed it on Preact being ideal for MVPs and PWAs—fast build times and minimal overhead lead to quicker feedback loops. And the fact that hooks are decoupled from the core package is a great way to keep things lean, scaling up only when needed.

Of course, React’s larger ecosystem makes it better suited for complex, large-scale apps, but for projects where performance and footprint are key, Preact’s advantages are hard to beat.

If anyone’s still unsure whether Preact is the right fit, I’d recommend Scott Cosentino’s article. It’s full of practical insights, use cases, and technical comparisons: scalablepath.com/react/preact-reac...

Thanks for putting this out there—great to see more devs shedding light on Preact!