React is undoubtedly reigning in the IT industry with its rich features and functionalities. It has revamped the way web development takes place. According to Stackoverflow Developer Survey 2021, React has grabbed the first position for the most wanted framework to build web apps.
But, what is Preact? Have you ever heard of Preact? This technology is claimed to be a lightweight alternative to React for building web applications. We will walk you through the differences between Preact and React in this blog and shed some light on the pros and cons of both technologies.
What is Preact?
Use Case Examples: Groupon, Uber, Lyft, Financial Times, Broadway, Domino’s, Etsy, etc.
Preact is the best choice if you are concerned about the app’s performance, speed, and size. It is used mainly for building progressive web apps. For instance, Uber has switched its PWA to Preact in production to make it super-lightweight and high-performing.
Apart from this, it’s a very small library, which doesn’t demand extra effort to put in for learning. Moreover, its similarity and compatibility with React make it an easy-to-use library to use with the existing React package, with some aliasing, i.e., using preact/compat.
What is React?
Use Case Examples: Facebook, Netflix, Instacart, Dropbox, Salesforce, PayPal, etc.
Pros & Cons
Pros of Preact
- Fast & Lightweight: Preact is just 3.5 kb in size and renders quickly, making it the best framework for building high-performing lightweight apps.
- Compatible: It is highly compatible with React API and supports the same ECMA Script, making it efficient enough to integrate with an existing React project for enhanced performance.
- Large Ecosystem: It is well-documented, which makes the learning curve simple. It also has a large community with many contributors - ready to make bug fixes and provide solutions to the problems.
- Dedicated CLI: Preact has a powerful CLI that helps developers build PWA in a few seconds without configuring WebPack, babel, Terser, etc.
- Preact/compat: It has a package named preact/compat to offer 100% compatibility. It let developers use React libraries with Preact in order to write ReactDOM code without making any changes to the workflow and codebase.
Cons of Preact
- Mimics React: Preact was developed as a lightweight alternative to React. Hence, most of the development through this library mimics React instead of innovating the app development.
- Use of additional library: With Preact, it is necessary to use additional libraries like preact/compat, preact/test-utils, etc., to bring connectivity between Preact and React-based npm packages. This makes the project large and slow.
- No Synthetic Event Handling: Preact is based on browser API and doesn’t support synthetic event handling, which can affect app performance and cause maintenance issues while using React for development and Preact for production.
Pros of React
- One-way Data Binding: React supports unidirectional data binding, making the app less prone to errors and simplifying debugging.
- Well-documented: React has proper documentation with several tutorials and examples that make the learning process easy.
- Large Community: React is backed by a large community of developers and contributors, making it the best framework for web app development.
- Reusable Components: Reusable components let developers segregate the complex UI into several components that can be used in other parts of the application, making the app development fast.
Cons of React
- Unopinionated Framework: React is an unopinionated framework, making it flexible in defining the architecture. But, it can cause issues if developers don’t have good architecture knowledge.
- View-centric Library: React, being a view-centric library, demands to do some legwork to figure out several aspects like state management, routing, data handling, relying on different third-party modules and libraries like Redux and NPM.
What’s Different in Preact & React?
Preact and React have some subtle differences:
- Hooks: Hooks are stored separately in Preact and need to be imported differently than React.
- App Size: Preact is much smaller in size than React. The Preact 7.2.0 in minified and gzipped is just 3kb while React 16.2.0 is 31.8K in size, as mentioned on GitHub.
- Rendering: React apps take a long time in loading, making the rendering process slow and complex. Preact, on the other side, has a faster rendering process.
- Event Handling: React implements its own synthetic event system for event handling, reducing app performance, while Preact has no synthetic event. Instead, it uses the browser’s addEventListener for performance and size benefits.
- Use of JSX and HTML: With Preact, you can use old HTML attributes as it doesn’t push JSX for client-side templating, unlike React.
What Should You Consider? Preact or React
However, you can use both libraries or switch between these two as per your requirement. Apart from this, developers are not required to learn an entirely new technology to use Preact, but they should have expertise in React.
React.js tops the market for its rich features, while Preact gives the advantage in lightning-fast performance. So, if you want to develop small applications like landing pages and PWAs that can load fast, then choose Preact. But, you can’t create a complex app alone in Preact. You will have to use React for such complex applications.