React is the most favored web framework among developers, and major companies like Facebook, Twitter, and Netflix use it to power their applications. It has changed the landscape of frontend development with its rich features and functionalities. However, React has spawned a similar library (when it comes to web development) which might give it a run for its money.
Meet Preact! Preact is a JavaScript library that is a lightweight and faster 3kB alternative to React but with the same modern API. With 31.1k stars on GitHub, it is rapidly gaining popularity, following in the footsteps of React. This article will talk about Preact in detail, its pros, cons, and comparison to React.
What is Preact?
As mentioned above, Preact is a lightweight alternative to React created by Jason Miller and a few other contributors focusing on increasing the performance of apps. It is a JavaScript framework that is smaller in size than React and offers the same API and features that ship with React. It also implements the virtual DOM component paradigm like React and similar libraries.
Preact’s smaller footprint means that you don’t have to worry about your frontend JavaScript library or framework taking up the majority of your app’s JavaScript size. Here are some more features of Preact:
- Fast, lightweight, and small in size
- Renders quickly and efficiently
- Provides efficient memory storage
- One of the fastest virtual DOM libraries due to its predictable and straightforward diff implementation
- Highly portable and embeddable, indicating it can be used to build parts of an application without complex integration
- Compatibility with components available in React ecosystem using preact-compat
To elaborate on preact-compat, it is a package in Preact that works as a compatibility layer between React and Preact. It enables even the most complex components of React to be used in your application. And it also allows switching from existing React code to Preact easily without changing imports from React or ReactDOM. Moreover, using preact-compat is easy as installing (via npm) and adding preact-compat alias in your code.
Preact is being increasingly adopted by companies such as Housing.com, Lyft, and Uber. In fact, Uber’s engineering team even highlighted how it used Preact to develop the mobile version of Uber in one of their articles, which led to its better performance significantly due to its minimal size.
Why use preact?
Preact’s is only 3kB in size when gzipped, unlike React’s 45kB. And every kilobyte of JavaScript a browser has to download, parse, and execute slows the application and reduces its performance. So the bigger the script, the more code to parse, which takes time. But in the case of Preact, it is small, which makes it faster and a popular choice of application development. As a result, the better performance of an app leads to better user experience, conversion rates, and better SEO rank.
Preact can be a lightweight alternative if you love building views with React but want to prioritize performance, speed, and size as well. For example, it is suitable for progressive or mobile web apps. Moreover, since Preact is similar to and compatible with React, developers need not start from scratch to learn a new library. And thanks to preact-compat (the compatibility layer), developers can use existing React packages with just some aliasing. So whether you are getting started with a new project or developing an existing one, Preact can prove time-saving.
Preact pros and cons
However, every library out there has its own set of pros and cons. And only the project priorities can help decide which library is a good fit for development. In this section, we will look at the pros and cons of Preact to help you make a better decision.
Pros
- Fast, lightweight, and small in size
- Offers similar React API and patterns
- Largely compatible with React
- Easier to swap with React in an existing project to increase performance
- Easy to learn, and the codebase is easy to understand
- Increases developers productivity as there is no need to write large codes
- Has own set of advanced features independent from React
- Powerful and official CLI to create new Preact projects quickly
- Encourages using HTML over JSX to unlock regular attributes of HTML
- Offers its own server-side rendering, routing, and other such add-ons
- Good documentation and examples available on the official website
Cons
- Smaller community support than React’s and not maintained by a big tech company, such as how Facebook maintains react
- Hooks are in a separate package, preact-hooks (a pro for some developers)
- Requires additional library/layer to use React components or packages which can make the project larger and slower
- Supports only ES6 class-based component definition and stateless functional components
Preact vs. React: What makes Preact different from React?
“Preact itself is not intended to be a reimplementation of React. ” — Preactjs.com
Preact and React are different in many ways. Firstly, Preact is faster, lighter, and smaller (only 3kB in size when gzipped as opposed to React’s 45kB) than React. And it includes only a subset of React APIs but not all features available in React. On the other hand, Preact does not attempt to have every single feature of React in order to remain small and focused.
Although, Preact uses the same API as React, the same lifecycle methods, and methodologies. As for the cost of development with Preact, there is no concrete information available as opposed to the cost of hiring react developers. A larger number of developers experienced in a particular framework also contributes to keeping costs within a reasonable budget.
What to choose: Preact or React?
To sum up, Preact and React are both open-source JavaScript frameworks but with distinctive qualities. While Preact is preferred for better performance, React is popular for its reusable components and simplicity.
However, we can’t say that Preact replaces React because both the libraries have their own set of pros and cons. You can choose according to your development project needs and business objectives. Or you can use both the libraries and switch between the two as required. Moreover, a developer will need expertise in React to use Preact.
Preact can be ideal for building progressive web apps, landing pages, self-contained web widget/embed, or apps where performance is a priority and size is minimal. On the other hand, React can be used to build complex and large-scale applications. So, the answer to the question React or Preact will always depend on your use case.