Preact- A Clever Alternative of React

React, the most popular front-end framework nowadays, and for good reasons, let alone its virtual DOM, one-way data binding, simplicity, and several other amazing features.

Preact, on the other hand, is a clever approach to come around with a tiny core-value proposition of React, having the same API composition, but way faster and easier than React.

“The objective behind developing PreactJS is to offer memory efficiency, better performance, and closer compatibility with React.”

Over the course of a few years, a wide spectrum of websites from small open-source projects to the large MNCs have managed to switch to Preact, that includes Google, Uber, Pepsi, Financial Times, Tencent QQ, Housing.com, The New York Times, Dailymotion, Groupon, and the list goes on and on.

Here, we’ll discuss a few things about Preact-

What is Preact??

Preact is a JavaScript library, known as _“Fast 3kb React Alternative with Same ES6 API” _or ‘Drop-in replacement for React’, created by Jason Miller. The most interesting thing about this library is its small size. The particular ‘3kb alternative’ term is used to indicate its 3kb size.

Regardless of its smaller size, it claims to perform better than React. It is a React clone library that is identical to React in terms of modern API, Components & Virtual DOM. Swapping React with Preact is very easy and that too without worrying about performance attenuation.

What Does Preact has In-Store for You?

You would be surprised to see how easy it is to use Preact. All you have to do is to install Preact and preact-compat and alias this preact-compat in your code with React. (Here, compat stands for compatibility)

“preact-compat is a 2kb compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact.”

This aliasing enables the React ecosystem to be used in your application. You can import and use react modules & libraries, as many as you want, in your Preact project. That’s incredible, isn’t it??

Here’s a small list of features that Preact has in-store for you-

• Similar React API & Patterns
• ES6 Class Components: Classes that expressively define stateful components.
• Higher-order Components: Return other components from render()
• Stateless Pure Functional Components: Functions that accept props as arguments and return JSX/VDOM
• Extensive React compatibility
• Virtual DOM Diffing: Preact’s diff is simple, effective, and extremely fast
• Supports all modern browsers and IE11+
• Highly Optimized Algorithm
• Seamless Server-Side Rendering
• Component and Element Recycling
• Transparent Asynchronous Rendering with a Pluggable Scheduler
• Instant Production-Grade App Setup with Preact CLI

Features of Preact

Preact supports almost all the modern browsers nicely, such as- Chrome, Firefox, Safari, Edge, and IE11+.

Due to its plethora of plugins and add-ons, companies are taking a quick shift to it. It aims to deliver a few key goals, as given below-

• Lightweight: The feature that makes it highly popular is its considerably smaller size. To your surprise, the largest part of the application will be your code. That means, without stressing about keeping the framework under control, you’ll have a lot of time for coding only.
• High Performance: Preact is one of the fastest virtual DOM libraries. The qualities that make it faster is not just its tiny size but also the simple and predictable diff implementation that makes it faster.
• Embeddable: Preact can be embedded into a widget and by applying some tools, you can build an app without complex integration.
• Instantly Productive: Productivity increases many times when you don’t have to work on its size. Being lightweight, it spares your efforts and gets you productive instantly.
• Ecosystem Compatible: By aliasing React to Preact, you can make use of thousands of components from the vast React ecosystem.
• Portability: The virtual DOM component can easily be taken to other places, which could not be done otherwise.

How Preact Differs from React??

While discussing ‘what makes Preact different from React’, the very first and most obvious difference is its size. When React weight 45kb (around), Preact is just 3kb.

However, there are some other reasons that add up to the differences. Though, many of them are either frivolous or can be removed completely by using the compatibility layer ‘preact-compat’.

Let’s see what are differences in this so-called replica of React-

• Instead of className, you can just use classfor CSS Classes.
• this.state and this.props have been passed to render().
• The h() function turn JSX into a ‘Preact-understandable’ structure.
• Element and component pooling is possible in Preact.
• setTimeout(1) for batching of DOM updates, debounced or collated.
• PropType is not available in Preact’s core, though supported in preact-compat.
• Preact components do not implement childContextTypes or contextTypes, receive all context entries from getChildContext()

Starting Up with Preact CLI

Preact CLI is the Command-Line Interface that runs in the terminal of your system and helps you get started with building modern preact applications instantly, without any configuration. It is built upon the open-source tools such as Webpack, Terser, Babel, etc.

In order to get started with Preact CLI, you don’t need any prior knowledge and this, the simplicity, makes it the most preferred way to use Preact above all. You’ll get everything, right from hot reloading to critical CSS inlining, organized here for you. You can expect excellent and amazing performance from Preact projects with it.

You can install it with a simple command-

Let’s move further and bring the out-of-box features of it in the limelight-

• Fully Automatic Code-Splitting
• Differential JavaScript Serving
• PRPL Pattern Support for Efficient Loading
• Pre-rendering for a fast Time to First Paint
• Support for Sass, Stylus, LESS and CSS Modules
• Hot Module Replacement
• Automatic App Mounting & Debug Helpers

Switching from React to Preact

Preact is an exquisite choice to develop progressive and interactive web applications. The small size of Preact is preferable when you’re on a tight loading performance budget. The large bundles of JS lead to stretch the loading times, but by shorting down the library code by Preact, it loads quicker.

Switching to Preact from React can shave off multiple KBs in your project and makes it faster by enhancing the interactivity in one RTT.

There are basically two approaches to switch from React to Preact, that is-

• Setting up & aliasing preact-compat
• Switching imports to Preact and removing incompatible code

In your existing React app, you can try out Preact using the preact-compat compatibility layer. It lets you continue with your React/React DOM code with slight or no changes at all in the codebase.

This preact-compat package increases the bundle size by 2kb only and provides a major advantage by supporting the vast ecosystem of React modules. It enables you to work with Preact just like react and react-dom.

The process includes a few steps-

#Installing & Setup

#Aliasing React to Preact via Webpack

A Simple ‘Hello World’ App

Let’s make a simple ‘Hello World’ app. Our end goal here is to have an app that renders a text ‘Hello World’-

Congrats, we’re done here. You’ve built your first Preact app.

Upgrading to Preact X

Recently, Preact Team took a huge step by releasing the newest version, i.e., Preact X, in the series after Preact 8.x. In a nutshell, it’s a tiny, complete and feature-rich package.

According to the team-

“We’ve rethought every bit and byte of our code and added a plethora of major features in the process. The same goes for compatibility enhancements with the React ecosystem to support more third-party libraries.”

It brings a bunch of new and exciting features, some of them are mentioned here-

• Fragments: Special components that, without an extra wrapping DOM element, render children elements in line with the parent elements. Also, they allow returning multiple nodes from render.
• Hooks: Make logic-sharing within the components easier and can be imported via preact/hooks .
• preact-compat has moved to the core repository and now can be imported via preact/compat (note the slash).
• componentDidCatch: Enable catching and handling of errors within render.

There are so many other fixes in Preact 8.x, if you’ve filed to work with a library then give it a try with Preact X, I’m sure you won’t be disappointed.

Well, folks, I’ve tried to cover almost all the important matters (in-short) in this blog. Still, there’s so much more to know and learn about Preact. Whatever we learn can never be enough.

“Knowledge is infinite and indestructible. It can never be destroyed and remains in this universe in one or other forms.”

Final Words:

Are you confused about what to use, React or Preact?? Well, it completely depends upon your project requirements. Both of them have their own set of features and functionalities, though quite similar, but unlike enough.

You can use React for large scale apps, complex projects or other heavy stuff, whereas, the opposite is true in the case of Preact. It would work better for smaller and lighter apps. There is no point in building a complex application with Preact and importing several modules from the React ecosystem, wouldn’t it be better to just finish it with React??

Thanks for reading till the very end!! If you liked it then go further and reach out to our website https://www.habilelabs.io/blog/ for more similar stuff.