Skip to content

React vs. Preact

React is a library that’s actively used and discussed by frontend developers. React solves a lot of common problems in interface development. It’s a powerful, scalable, and flexible tool that’s useful for developing modern UIs. React is also probably the most popular JavaScript library for single-page applications since the days of jQuery. However, it’s difficult to argue with the fact that React is heavy and the React license is dangerous for some companies.

On the other side we have Preact, one of the smallest alternatives to React (in terms of file size). Preact is available with the MIT license and supports all popular modern browsers including IE9+, just as React does.

What are the key differences between React and Preact?

The main difference is, of course, the size. For comparison, the gzipped size of ReactJS is 45 Kb, while the gzipped size of PreactJS is only 3 Kb with the same ES6 API.

Why is Preact so small?

What’s wrong with it? Surely this is what everyone thinks who starts to wonder why there’s such a difference in size. The answer is simple—the main reason for its smaller size is that Preact is only intended to work in a browser with DOM. It has different renderer syntax from React (such as react-dom or react-native), but it’s not a drawback because it is compatible with React way too. Therefore, there are no superfluous abstractions either. Preact is as close to the metal as possible when we’re talking about browsers.

How to migrate to Preact

To migrate to Preact, you need to add the preact-compat package and change your webpack.config file a little bit. You can find detailed instructions on Preact’s official site.

We should mention that in principle you can use both React and Preact, so there’s no particular need to choose one library. You only need to choose according to your purposes and tasks, as well as what’s practical. The main reason to choose Preact is care about legal consequences and licenses from Facebook side. Therefore you can feel free to choose React if you don’t care about potential issue with Facebook. And also you always can switch between libraries and upgrade your project to use Preact, if you follow React rules. Some UI developers use React during the development phase and then switch to Preact for production. It’s worth noting that on the one hand, to use Preact you have to first master React. On the other hand, to use Preact you don’t need to learn a completely new paradigm.