Introduction to Preact : A smaller, faster React alternative

Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. As a frequent user of React, I’d always wanted to try out Preact and see what it offers, and the differences between Preact and React. In this article, I’ll do an introduction to Preact, its key concepts and differences between Preact and React.

I’ll also demonstrate how Preact works with external APIs by building a Preact app that shows the most recent debut shots from Dribbble.

Introduction to Preact

As mentioned above, Preact is a 3kb alternative to React developed by Jason Miller and a bunch of contributors. Preact was developed with the goal of building a JavaScript framework that’s small in size and yet offered the same API and features that React ships with.

With a total size of 3kb, this means you don’t have to worry about your JavaScript library/framework taking up a major chunk of your app’s total JavaScript size.

Preact is fast, and not just because of its size. It’s one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.

Preact aims to deliver on a few key goals:

• Performance: Render quickly & efficiently
• Size: Small size, lightweight
• Efficiency: Effective memory usage
• Understandability: Understanding the codebase should take no more than a few hours
• Compatibility: Preact aims to be largely compatible with the React API. preact-compat attempts to achieve as much compatibility with React as possible. More on preact-compat later.

Preact performs nicely with browsers (supports all browsers) although it may require some polyfills for IE7 and IE8. Preact has also seen a large adoption by the community with a plethora of plugins and companies are now beginning to switch to the JavaScript library.

Preact is now being used by companies like Lyft, Housing.com and m.uber.com. Uber’s engineering team recently wrote an article that highlighted how Preact was used to build the mobile version of Uber which in turn led to a better performance largely due to its very minimal size.

What makes Preact different from React?

That’s the question a lot of React developers would be asking as Preact is considered. React is already a decent JavaScript library which weighs in at ~45kb. So why would you consider building apps with Preact?

Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is a thin layer over Preact that attempts to achieve 100% compatibility with React. — Preactjs.com

File Size

Well for starters, there is a huge gulf in file size. Preact’s 3kb against React’s 45kb is a no brainer. The reason Preact does not attempt to include every single feature of React is in order to remain small and focused.

class vs className

When using React, if you wanted to add a class to a div you’d have to do something like this.

# React code
<div className="class-here">Content Here</div>

In Preact, you can just use class for CSS classes. className is still supported, but Preact encourages you to use class .

# Preact code
<div class="class-here">Content Here</div>

render()

In Preact, this.props and this.state are passed to render() for you. What does this mean? Take a look at the code below.

As you can see above, in Preact, we can make the code look cleaner by removing the this and if you even want to go a step further, you can use destructuring. See an example below.

Removal of PropTypes

Not everyone uses PropTypes, so they aren’t part of Preact’s core, hence the removal from Preact. If you’d still like to use PropTypes in your project, you can do so with the help of preact-compat or use them manually.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Using preact-compat for compatibility between Preact and React

Preact has this package called “preact-compat” which works as a compatibility layer between Preact and React. Using preact-compat makes it easy to switch from React to Preact. Switching to Preact can be as easy as installing and aliasing preact-compat in your code.

This lets you continue writing React/ReactDOM code without any changes to your workflow or codebase. preact-compat gives you the advantage of supporting the vast majority of existing React modules you might find on npm. So how do you add preact-compat to your existing React code?

Install preact-compat with npm.

npm i preact-compat

The next step is to alias preact-compat. You can do that by adding the following resolve.alias configuration to your webpack.config.js

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

The code block above basically translates to this — If I try to import a module called React or ReactDOM, don’t give me those modules, but instead give me what’s provided on the right hand side.

Getting started with Preact

The Preact API and developer experience is largely similar to that of React, but there are a few important differences developers should be aware of.

To demonstrate these, I built a simple app that displays recent designs using the Dribbble API. The live app can be seen here and the source code for the app can be seen in it’s Github repo.

Here, I’ll point out a few of the key differences that developers should be aware of when building with Preact.

To build the Preact app, we’ll be making use of the Preact CLI. Preact CLI is a project by the Preact team that helps developers get started with Preact easily. The Preact CLI helps you to generate a Progressive Web App and ships with features like:

• Auto-generated Service Workers for offline caching powered by sw-precache
• Automatic code splitting for routes.
• PRPL pattern support for efficient loading.
• Support for CSS Modules, LESS, Sass, Stylus; with Autoprefixer.
• Automatic app mounting, debug helpers & Hot Module Replacement.
• Zero-configuration pre-rendering / server-side rendering hydration

The preact-cli tool is intended to help you start writing Preact code with little or no build configuration. Install preact-cli on your computer by running the command below.

npm install -g preact-cli

Once the CLI has been installed successfully, go ahead and create a new app by running the command below in your terminal. preactdribbble is the name of the app to be created and can be called anything, the app’s name does not have to prefixed with preact .

preact create preactdribbble

This should create a new folder named preactdribble with all the files needed for the Preact app in it. Navigate into the preactdribbble folder as we’ll be working from there now. Let’s start the app and see what it looks like.

# start a live-reload/HMR dev server:
npm start

This starts up a dev server with Hot Module Reloading(HMR) at http://0.0.0.0:8080 or http://localhost:8080.