Preact is definitely worth taking a closer look. With a total size of 3kb, you don't have to worry about your JavaScript library/framework consuming a significant portion of your app's overall JavaScript size. Is it, however, the best option for your project?
Let’s dig into the basics of Preact (vs React).
Table of contents:
- What is Preact?
- React vs Preact - pros and cons
- Should you consider Preact in your next project?
- Bonus: How to Switch from React to Preact?
What is Preact?
Preact, a performance-focused lightweight alternative to React developed by Jason Miller, was created to build a JavaScript framework that was compact but offered the same API and functionalities as React. A brief statement on Preact’s homepage surely catches the eye, claiming it a “fast 3kB alternative to React with the same current API”.
Preact is very similar to React (think a React clone package) that has the same contemporary API, components, and virtual DOM as React, JSX, React DevTools support, HMR, and SSR are all in there. And, because Preact components are compatible with React, there is no need to worry about performance degradation. I will add from myself that it also runs smooth like butter.
What’s more, according to the MIT license, the software is open-source and freely available on the internet for anyone to use. Preact's community isn't in fact as large as other JS web frameworks, which is interesting because its initial releases occurred in the middle of 2015.
What’s interesting, Preact still tops the podium, despite React's recent size reductions.
React vs Preact - pros and cons
In recent years, React has become the most popular front-end library available. On GitHub, it has 173K stars and is maintained by Facebook. GitHub, Facebook, Twitter, and Netflix are just a few of the firms that employ React in their products.
By adding features that operate together, React aims to evolve the component model. Functional components making use of hooks are now the preferred way to write React components, as well as component error boundaries (fault-resilient components), portals, and a modern context API. The fact that all of these elements are integrated into a single library and designed to operate effectively together means that they naturally interact with one another.
Still, despite React's enormous popularity, some developers say that it bloats the application's bundle. Let’s take a minute to verify this concern with an amazing tool, comparing the size of bundles, Bundlephobia. We can note 128kB for the react + react-dom bundle, even after it has already been minified. Because of this, our app’s bundle starts with 128kB in size before we've even written a single word of code. A little heavy, don’t you think?
What’s the point of weighing clear bundles, you may ask? Be aware we tend to lose performance with every kilobyte of JavaScript the browser must download, process, and execute (think: weak mobile signal or limited device memory). As a result of an inconsistent internet connection, the user experience might be negatively affected, resulting in poorer SEO rankings and overall conversions.
That’s why more and more large organizations utilize Preact to power their products, even though it is not as widely embraced as React. Think Groupon, Uber, Lyft, Hashicorp, Housing.com, and Uber all use Preact today. Preact is also compatible with practically all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 11+.
Preact vs React - an upgrade to an easier life?
Although Preact is just 3kB after being minified and gzipped, it still promises to outperform React. Still, keep in mind that Preact is not meant to be a 1:1 reimplementation of React. There are a few distinctions (which can be obviously shushed down by utilizing preact-compat, a thin layer over Preact that strives to achieve React-alike compatibility). Yet, React itself is platform agnostic and has tons of dev tools, while Preact is meant just for the browser.
So, what are the main arguments for going Preact?
- Size: Small size, lightweight
- Efficiency: Effective memory usage
- Understandability: Understanding the codebase shouldn’t be much different from the typical React one.
- Compatibility: Preact aims to be largely compatible with the React API.
- High performance: Preact is one of the quickest virtual DOM libraries available. Not only is it minimal in size, but it also has a straightforward and predictable diff implementation, which makes it quicker.
React vs Preact: Let’s talk about the differences
1. There is no such thing as full React to Preact compatibility.
Preact's biggest flaw is that it isn't React. Jokes aside - because of this, there’ll always be a bunch of the newest React features which are not supported by Preact, with no guarantee that those will ever be implemented. There’s little to no chance that you will encounter that issue on the first day of your app development - still, when you find one of the “missing” features, believe me, you’ll know. Preact implements some of the latest React functionality outside of the main framework, but it comes at a price of bundling preact-compat, which adds another 13.5 kB to the app size.
2. Innovation or stability: pick one (and one only)
In contrast to React, portals developed outside of Preact will not respect the component tree's mounting order. Thus, surprises and improper coding can appear multiple times. All that is because of purposely limiting the scope of Preact’s core library. Also, a lot of "property of undefined" errors will be returned by the library, rather than by dev-friendly error messages and cautions. So, if you seek proven solutions, opt for battle-tested support provided by billions of React reports (think Facebook), which assures your app is far more resilient to crashes.
3. Don’t judge by slogans: app performance
The most off-putting difference while comparing Preact vs React is obviously the 3kB slogan. Here, the choice between Preact's 3kb and React's 45kb seems obvious. Still, to remain lightweight, Preact does not aim to include every single feature of React. The ugly truth is React optimizes real-world app performance in many ways that Preact does not. I recommend you do the following: replace React with Preact (Pure or Compat - they’ve different performance characteristics) in a medium-sized React app, then compare the performance. And then decide.
4. Removal of PropTypes
PropTypes aren't used by everyone, hence they're not part of Preact's core (which is why they've been removed). If you still want to use PropTypes in your project, you can do so via preact-compat library, which greatly increases the size difference.
Read: Next.js vs React: Which One Is Better for Your Project?
Should you consider Preact in your next project?
The answer to that question depends on your app. If you care about performance, this is exactly what Preact has to offer. It helps maintain a strict performance budget for their project and puts performance as its top priority.
Still, the price for migrating from React to Preact is that you will most likely have to forego some functionalities, or at the very least require some configuration to use some of the features that ship with React (preact-compat). Unit testing is an example of this.
Bear in mind that if you have tests for your components (and you should!), most of the time moving them to Preact isn’t as straightforward as just replacing react with preact package. If you happen to use Testing Library, there happens to be a Preact adapter created already. Another thing to notice about Preact is the lack of Synthetic Events. Preact's browser support target does not require this extra expense, therefore Preact handles events using the browser's native addEventListener. This often results in a codebase that requires less maintenance and performs better, but it might be an issue with some external libraries and tools.
It may also be argued that the absence of these features is what makes Preact the superior choice of the two, as it results in a very minimal codebase. Because of its small size, Preact is suitable for use cases such as a self-contained web widget/embed or a Progressive Web App and apps where performance is a priority.
React may be used to create complicated apps as well as large-scale apps with changing data. Another advantage of React is its fantastic ecosystem. A short search on Github reveals that there are numerous React packages for diverse use cases, even though the Preact plugin community is increasing. While it might be possible that all these awesome tools are compatible with Preact (especially when you use preact-compat), most of them aren’t tested to be compatible with Preact, and you’ll never be sure until you’ll try it yourself
As I previously stated, it all depends on your use case; if you want to build a little app that does one thing really effectively, Preact can be what you need. Just follow the example of Uber's engineering team who wrote an essay describing how Preact (instead of React) was used to build the app’s mobile version, which performed better due to its compact size.
I'd consider Preact for a use case like an embedded widget, but I'd probably choose to React for an app that I expect to maintain and build over the long term. When it comes to building hefty things, React is a good choice. There's no purpose in constructing an app with Preact and having to import 10–15 modules due to compatibility; at this point, I believe you should just create with React.
On the other hand, the Preact package is ideal if you're starting from scratch with your application. It is recommended to use preact/compact if you are migrating an existing application or rely significantly on React's ecosystem.
Bonus: How to Switch from React to Preact?
The Preact team did an outstanding job assisting developers in moving from React to Preact. The key here is the “preact-compat” package that acts as a compatibility layer between both libraries. This allows you to keep creating React/ReactDOM code without having to change your process or codebase. Aliasing allows you to leverage the React ecosystem in your application. So now, you can finally import and use any React modules and libraries in a Preact project. Isn't that amazing?
So, how can you incorporate preact compatibility into your existing React code?
1. Install preact-compat with npm.
2. The next step is to alias preact-compat. You can do that by adding the following resolve.alias configuration to your webpack.config.js
const config = {
//...snip
"resolve": {
"alias": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
// Must be below test-utils
},
}
}By following this method, we basically inform our webpack that if it encounters an import from "react", it should replace it with an import from preact/compat. The same is true for the other packages listed in the setup. Remember, you must include the above code in your webpack config file. More bundlers can be found in the official documentation.
And if you want to start an app from scratch, I recommend you go straight for Preact CLI, a command-line tool intended to help you start writing Preact code with little or no build configuration. What’s crucial, it does not require prior expertise to get started, making it the most popular method of using Preact. All you need to know is briefly explained here.
All in all, Preact employs the same API as React, the same lifecycle functions, and the same methodology. So, if you’re already building with React, Preact will be a breeze! And even if there won't be any chemistry between you two, it's still worth a try.
More learning materials:
