DEV Community

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

Posted on • Updated 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 (0)