Preact: a React-Like JavaScript library of only 3 KB!

Preact is often regarded as a miniature version of React. If you come across this shorthand regularly, it is quite simply because these two JavaScript libraries share a great many similarities. However, Preact differs from its near-namesake in several ways, notably by focusing on DOM manipulation. If you don’t know Preact yet, here is a definition in three parts. First we will look at Preact’s DNA, then we will examine how it differs from React, and finally we will see how to integrate Preact into a project.

Release date, licence and community: Preact’s identity card

The library was published in version 1.3 in September 2015 on GitHub by Jason Miller, also known by the handle @developit — a developer currently working for Google Chrome Labs, who is also behind several other small libraries. In terms of licensing, Preact has an MIT licence. However, there are grounds for doubting the durability of that licence, given that this library uses many elements originating from React, and that React, despite switching to an MIT licence in 2017, never really took a clear position on the conditions of its use. On the reputation side, in a little under four years Preact has won over a large, active community. Its GitHub page currently boasts more than 22,800 stars, is supported by more than 185 contributors and shows more than 1,180 forks! It is also worth noting that the library is updated roughly every month and has more than 130 releases.

Is it intended to replace React?

Not at all! Magic doesn’t exist — you can’t fit React into 3 KB! Preact is based on React’s DNA and has made a lot of compromises and a lot of choices in order to optimise its weight. That’s the key takeaway! The idea is to have a tool suited to an application’s needs. Why use React when you are only going to use barely 10% of it? Ah, because it’s part of your comfort zone and you don’t want to step outside it to learn a new paradigm? Well, that works out nicely: Preact is clearly aimed at you! This library will therefore allow you to optimise your applications’ performance by focusing solely on the code you need. That way, most of the code in your app will be your own.

What is the difference between React and Preact?

Preact, the lightning bolt that cleaves the DOM!

Let’s be honest, React is a bit like a war machine, and you could say it fights on every front (no pun intended). Whether for mobile with React Native, for graphical rendering (VR, 3D, etc.) or more generally for manipulating the DOM, React offers a HUGE number of possibilities — perhaps even too many! Where Preact stands out is above all in its philosophy. Unlike React, Preact restricts itself solely to DOM manipulation. In that sense it too makes it possible, among other things, to create a virtual DOM and to use a whole fleet of UX components. What’s more, if you are used to React, or if you want a specific feature that is not available in Preact’s component catalogue, you should know that the two libraries are compatible and that you can call on a React component within Preact by installing a specific module via npm. Preact therefore stands out by adopting a stripped-back architecture, which makes it possible to optimise the performance of a website, an application or even a user interface by making the code simpler and less cluttered. As a result, less code is loaded, which speeds up the loading of JavaScript bundle calls during navigation.

A slightly different codebase

Even though the library has the same ES6 API as React, its codebase does differ a little. Don’t worry, we are only talking about small changes: Preact’s core is essentially the same as React’s, so it takes very little effort to switch. 😉

No synthetic events

One of the first things to know is that Preact does not use Synthetic Events, React’s event handler. Instead, it simply prefers to use addEventListener, the event system used natively by browsers. This is important to note because it implies a few changes in browser behaviour, notably for onChange.

PropTypes

The library has also chosen not to use PropTypes. This feature makes it possible to assign a type to your variables (string, boolean, number, etc.); it is certainly useful, but not everyone uses it, so some tidying up was done on that front too.

props.children is always an array

With Preact, props.children is always an array. You can therefore use all the Array.prototype methods without having to resort to an equivalent.

Prefer class to className

Worth knowing: you can write class directly in JSX. Although both are possible, unlike React’s JSX — which imposes the name className to represent the HTML class attribute — Preact offers a return to basics with class. It is simply easier to refer to what you already know.

A new render() function

this.props and this.state are handled automatically in the render() function. This method, specific to the library, makes it easier to destructure the parameters passed to it. Also, render() accepts a third argument, which is the root node to be specified.

A portable, super-fast JavaScript library

Even though Preact does not allow native mobile application development, it nonetheless represents an effective solution for developing a Progressive Web App (PWA) with its preact-cli tool, which has a build system optimised for that purpose. Out of the box, a PWA developed using this tool scores 100 in Lighthouse, Google’s web page auditing tool. With its minimalist weight (3 KB), Preact can be embedded in a widget! Indeed, it is possible to use Preact in the custom JavaScript tag of Accelerated Mobile Pages (AMP pages). It is worth remembering that AMP is a technology developed by Google — yes, the very company where Preact’s developer works. One more piece of gossip: you can also see on Preact’s GitHub page that the AMP project is a sponsor of Preact.

How do you move from React to Preact?

If you are already using React, you have two options for switching to Preact:

1. Using the preact-compat alias. The first option is the simplest: it relies on using the preact-compat alias to replace every name starting with React with preact-compat in your code. That way you can carry on coding without changing your habits and without upending your codebase. 😉 To do this, you first simply need to install preact and preact-compat using the npm module manager: npm i -S preact preact-compat. Once these two dependencies are installed, all that remains is to configure the build system so that the react (React’s core) and react-dom imports now point to preact-compat. These aliases can be created with Webpack, Browserify or even Node. Advantages:
   • you benefit from all the React modules available on npm
   • you don’t need to modify your code
   • it makes React and React-DOM work correctly within a single module
   Drawback:
   • with preact-compat you add 2 KB to the size of your final bundle
2. Doing it by hand. The second approach aims to redirect your imports towards preact and remove incompatible code. To do this, you first need to install the library: npm i -S preact. Secondly, you need to replace React’s JSX pragma, namely React.createElement(), with Preact’s, which is h(). In case you didn’t know, the JSX pragma is the name given to the function that transpiles JSX. Preact uses the Hyperscript library, which is where the h() pragma comes from. So <h1> transpiles to h('h1'). By way of comparison, React uses React.createElement(). It is possible to carry out this operation directly with the Babel transpiler. You will find more information on the subject in the documentation provided by Preact.