React and Preact: Differences, Pros and Cons

For a while, React has been one of the favorite tools for front-end developers. Sometimes it can be a little heavy, though. A lighter alternative known as Preact is largely compatible with React. We’ll go over the differences in this post and also cover pros and cons.

What Are the Differences Between React and Preact?

There are a few key differences you should take into account. Note that you can use both. It might make sense to use React during development and swap to Preact for production. You will need to make sure you will use the subset of features Preact provides, though.

react-lite is another interesting alternative worth studying.

API

Preact supports only stateless functional components and ES6 class based component definitions. Fortunately, losing createClass doesn’t hurt that much given these two are more than enough for most development needs.

Size

As Preact doesn’t try to do everything that React does, its implementation can be much leaner. To give you a better idea, a minified version of React weighs around 135 kB. Serving it gzipped you should get around 80 kB. This can be pushed further by creating a production build as it strips some of the checks. Minified and gzipped version of Preact weighs mere 3kB. This difference alone is huge.

react-lite sits somewhere in the middle somewhere between 10-20k when both gzipped and minified.

Performance

Compared to React, Preact is definitely leaner and faster as well. Benchmarking by Stefan Krause supports this.

Pros and Cons

React

Pros

Cons

Preact

Pros

Cons

Conclusion

Many people have different takes on using Preact over the React. You can study the opinions of developers concerning these technologies at the Hacker News thread.

It’s always better to attempt using something that introduces improvements in some already existing technology. The same is the case with React and Preact. Preact does offers a few interesting advantages over React although you’ll lose something in the process.


Maria Mincey is a software developer at Xicom Technologies, a software development company. They deliver comprehensive web applications for different industry verticals.